fullpage插件的简单介绍:
一.简介:fullpage.js是一个基于jQuery的全屏滚动插件,它能够很方便&很轻松的制造出全屏网站
二.主要功能:
1.支持鼠标滚动
2.多个回调函数
3.支持手机&平板触摸事件
4.支持css3动画
5.窗口缩放时自动调整
6.可设置滚动宽度.背景颜色.斜体样式.滚动速度.循环选项.回调.文本对齐方式等
fullpage插件的下载使用:
下载地址:http://github.com/alvarotrigo/fullpage.js
使用方法;
1.引入文件
1.1fullpage自己的css库文件
1.2jQuery(版本1.6.0+)
1.3fullpage自己的js文件
1.4其他的扩展库(jQuery.easings.min.js等)
<div id="fullpage">
<div class="section">这是第一屏</div>
<div class="section">
<div class="slide">第二屏的第一张幻灯片</div>
<div class="slide">第二屏的第二张幻灯片</div>
<div class="slide">第二屏的第三张幻灯片</div>
<div class="slide">第二屏的第四张幻灯片</div>
</div>
<div class="section">这是第三屏</div>
<div class="section">这是第四屏</div>
</div>
使用方法:
<script>
$(function(){
$("#fullpage").fullpage();
})
</script>
配置项:
sectionsColor: 可以为每一个section设置背景色
controlArrows: 定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,
幻灯片两侧的箭头会消 失,在移动设备上可以通过滑动来操作幻灯片
navigation: 是否显示导航,默认为false,如果设置成true,会显示小圆点,作为导航
navigationPosition: 导航小圆点的位置,可以设置为left或者right
navigationTooltips: 导航小圆点的tooltips设置,默认是[],注意按照顺序设置
showActiveTooltip: 是否显示当前页面的导航的tooltip信息,默认为false;
$.fn.fullpage.方法名
方法
moveSectionUp(): 向上滚动一页
moveSectionDown(): 向下滚动一页
moveTo(section,slide): 滚动到第几页,第几个幻灯片,注意,页面是从1开始,而 幻灯片是从0开始计算
silentMoveTo(section,slide) : 滚动到第几页,和moveTo一样,但是没有动画效果
回调函数
afterRender(): 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
onLeave(index,nextIndex,direction) 在我们离开一个section时,会触发一次此回调函数,接收index,nextIndex和direction3个参数
index: 是离开的页面的序号,从 1 开始,
nextIndex:是滚动到的目标页面的序号,从 1 开始
direction:判断向上滑动还是往下滑动,值是 up 或者 down
fullpage插件简介
很方便,很轻松制作全屏页面
fullpage插件下载使用
使用步骤
引入文件
页面骨架
fullpage方法
fullpage插件常用API
配置项、方法、回调函数