关于对js插件fullpage学习的一些心得

今天在寝室无聊的紧，学习了一个js插件fullpage，是在慕课网上面学的，就根据自己学的做一点总结吧。

1. 用途

fullpage主要用于在巨幕显示的时候，比如像iwatch 的主题页面。另外，fullpage还提供一些回调函数和一些方法让做出高大上的页面很容易。It is so easy.

2. 主要的引用文件
可以把fullpage文件离线到本机，然后应用，但是这样做的话，会增加页面的反应时间，以及给服务器增加负担。所以一般的方法是引用cdn文件，主要引用的文件有

[fullpage的css样式表]1
[JQuery文件]2
[fullpage的js文件]3

注意要将jq文件链在fullpage文件之前，不然会不起作用

3.首先我们做一个框架

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
<style > </style>
</head>
<body>

<div id="fullpage">
  <div class="section ">
    <h1> first page</h1>
  </div>
  <div class="section ">
    <div class="slide ">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
  </div>
  <div class="section ">
    <h1>third page</h1>
  </div>
  <div class="section ">
    <h1> forth page</h1>
  </div>
  <div class="section ">
    <h1> fifth page</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"> </script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"> </script> 

</body>
</html>

框架做好了，主要是几个div的盒子每个盒子里都是装的一个页面（section），其中第二个盒子中间还有几个slide的盒子就是在一个页面中做的几张轮换的幻灯片。

然后通过样式表将五张页面的文字和背景颜色进行渲染。当然要页面能动起来要用写一段js

<script> $(document).ready(function(){ $('#fullpage').fullpage(); }); </script>

这样当鼠标的滑轮滑动的时候，页面就能进行单页滑动了。

4.fullpage的设置项
fullpage的设置项有很多，总结了几条常用到的。

sectionsColor:每个页面的背景颜色可以不到css样式表中进行设置，直接用sectionsColor:['red','blue','yellow','pink','black'],这样一行代码即可将五张页面的背景进行改变。

scrollingSpeed：每张页面换到下一张页面的时间。如

scrollingSpeed:2000

就是表示一张页面滑动到另一张页面所用的时间是2000毫秒，即2秒。

anchors：确定某一张页面的锚点。这个主要用于收藏某一张页面的时候，再次打开这一张页面的时候，不用一页页的翻过去，而是直接打开。
如：

anchors:['page1','page2','page3','page4','page5'],

就能在打开某一张页面的时候，地址栏里有#page1，等。

4.滑动循环主要用到

loopTop:true,             /* 顶部循环滚动是跳往底部的页面*/
loopBottom:true,           /* 底部循环滚动，同样是跳往页面*/
loopHorizontal:false,      /* 幻灯片循环滚动*/

和

continuousVertical:true,

这两种循环的区别是：第一种在页面滑动到最后一页时，在进行滑动的时候，会跳回第一页，是跳跃的，而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意，两种循环方式不能兼而有之 （实际上两种循环方式都使用的话，会显示第一种。。。）

menu：菜单选项menu:'#fullpageMenu',除了在这里设置外，一般会在前面设置一个ul标签，

<ul id="fullpageMenu">
  <li data-menuanchor="page1" class="active"><a href="#page1">page1</a></li>
  <li data-menuanchor="page2"><a href="#page2">page2</a></li>
  <li data-menuanchor="page3"><a href="#page3">page3</a></li>
  <li data-menuanchor="page4"><a href="#page4">page4</a></li>
  <li data-menuanchor="page5"><a href="#page5">page5</a></li>

</ul>

再用css对标签进行渲染。就可以有菜单的效果。

6.其实相对于menu我觉得nav导航更好，因为导航的位置更好控制，而且导航的小原点感觉更好看。

navigation:true,              /*导航是否显示*/
navigationPosition:'right',  /*导航条的位置，默认是右*/navigationTooltips:['page1','page2','page3','page4','page5'],/*导航条显示的内容*/

同样，

showActiveTooltip:true,                                    /*导航条内容是否显示，如为false则须将鼠标放到导航条上才能显示*/
slidesNavigation:true,                                        //幻灯片导航条是否显示
slidesNavPosition:'top',                                          //幻灯片导航条的位置

这是幻灯片的导航的。

嗯，我想这就是我能今天下午学到的吧，感觉总算是有点收获。就这样吧，摆了个白。
最后，我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
<style > body { text-align: center; font-size: 12px; color: white; } /*.section1 { background-color: orange; text-align: center; } .section2 { background-color: red; text-align: center; } .section3 { background-color: green; text-align: center; } .section4 { background-color: gray; text-align: center; } .section5 { background-color: black; text-align: center; } .slide{ background-color:pink;}*/ #header { font-size: 50px; position: fixed; top: 0; right: 50px; } #fullpageMenu{ font-size:20px; position:fixed; top:50px; z-index:999; list-style-type:none; } #fullpageMenu a{ text-align:left; text-decoration:none;} #fullpageMenu a:hover{ color:#FFF; } </style>
</head>
<body>
<div id="header">header</div>
<ul id="fullpageMenu">
  <li data-menuanchor="page1" class="active"><a href="#page1">page1</a></li>
  <li data-menuanchor="page2"><a href="#page2">page2</a></li>
  <li data-menuanchor="page3"><a href="#page3">page3</a></li>
  <li data-menuanchor="page4"><a href="#page4">page4</a></li>
  <li data-menuanchor="page5"><a href="#page5">page5</a></li>

</ul>
<div id="fullpage">
  <div class="section ">
    <h1> first page</h1>
  </div>
  <div class="section section2">
    <div class="slide slide1">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
    <div class="slide">slide1</div>
  </div>
  <div class="section section3">
    <h1>third page</h1>
  </div>
  <div class="section section4">
    <h1> forth page</h1>
  </div>
  <div class="section section5">
    <h1> fifth page</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"> </script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"> </script> 
<script> $(document).ready(function(){ $('#fullpage').fullpage({ sectionsColor:['red','blue','yellow','pink','black'], //resize:false, //scrollingSpeed:2000, //滚动时间，2000就是两秒 anchors:['page1','page2','page3','page4','page5'],/*设置锚链接 主要是在收藏某一页的时候，当再次打开的时候，它不会由第一页滑到这一页，而是直接出现这一页*/ // lockAnchors:true,/*锁定锚节点*/ //loopTop:true, /* 顶部循环滚动是跳往底部的页面*/ /* loopBottom:true, 底部循环滚动，同样是跳往页面 loopHorizontal:false, 幻灯片循环滚动 */ //autoscrolling：true, /*页面不会按照插件的滚动方式滚动，而是按照滚动条的滚动方式滚动*/c'C //scrollBar:true, /*此设置项为true，则会出现滚动条但还是按照插件的滚动方式*/ fixedElements:'#header', //设置某一元素固定于某一位置，通过JQuary捕捉定位到某一元素（如这个实例中的header） //continuousVertical:true, /*循环滚动，与loopTop和loopBottom不兼容，不能同时设置，经测试如果同时设置则会有looopTop或者loopBottom的效果*/ //menu:'#fullpageMenu', //为菜单选项，在前面的ul中要把锚链接相应的链接起来。 navigation:true, //导航是否显示 navigationPosition:'right', //导航条的位置，默认是右 navigationTooltips:['page1','page2','page3','page4','page5'],//导航条显示的内容 showActiveTooltip:true, //导航条内容是否显示，如为false则须将鼠标放到导航条上才能显示 slidesNavigation:true, //幻灯片导航条是否显示 slidesNavPosition:'top', //幻灯片导航条的位置 }); }); </script>
</body>
</html>

秒客网

关于对js插件fullpage学习的一些心得

相关文章