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;