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 或者 downfullpage插件简介 很方便,很轻松制作全屏页面 fullpage插件下载使用 使用步骤 引入文件 页面骨架 fullpage方法 fullpage插件常用API 配置项、方法、回调函数