FullPage屏幕滚动插件使用教程

1. 导入

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

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

 

2. 使用

设置一个外层div标签,然后设置IDfullpage

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

classselectdiv标签中设置classslidediv标签来表示每一层的幻灯片。

 

使用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’];//不要和任意得idname相同可通过地址改变屏幕位置.

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

也可以给某屏添加Classactive来设置默认屏幕;

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

css3:是否使用css3transform来实现滚动效果,默认为true;

阅读更多
想对作者说点什么? 我来说一句

类似fullPage.js全屏滚动插件大全

2016年03月17日 2.19MB 下载

没有更多推荐了,返回首页

不良信息举报

FullPage屏幕滚动插件使用教程

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭