FullPage屏幕滚动插件使用教程

1. 导入

需要引入三个文件jquery.fullpage.js；jquery.js；jquert.fullpage.css；

附上插件下载地址：http://www.dowebok.com/77.html

 

2. 使用

设置一个外层div标签，然后设置ID为fullpage。

然后设置在fullpage标签内设置几个div标签，class设置为section。表示每一屏。

在class为select的div标签中设置class为slide的div标签来表示每一层的幻灯片。

 

使用script标签并在里边写入代码

$(document).ready(function(){

$(“#fullpage”).fullpage();

});

3. 配置

需要在fullpage中对网页效果进行配置.

$(“#fullpage”).fullpage({

//需要配置的内容

});

sectionsColor:[“颜色”,”颜色”,”颜色”]; //用于给每一屏配置背景颜色;

controlArrows:true/false; //用来设置是否可以用箭头控制幻灯片，默认true;

verticalCentered:true/false; //用来设置每一页的内容是否垂直居中；

resize:字体是否随窗口缩放;

scrollingSpeed: 设置滚动速度，默认单位为毫秒，默认700；

anchors:定义锚链接，默认[],举例子：[‘page1’,’page2’,’page3’];//不要和任意得id和name相同可通过地址改变屏幕位置.

lockAnchors:是否锁定锚链接，也就是让anchors属性失效;

也可以给某屏添加Class为active来设置默认屏幕;

easing:定义select的滚动的动画方式，默认为easeInOutCubic，如果要修改此项，需要引入jquery.easings;

css3:是否使用css3的transform来实现滚动效果，默认为true;