参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo
一、简介
fullPage.js 是一个基于jQuery的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
二、获取方式:
四、如何使用:
<div id="fullpage"> <div class="section"> //每一个session对应一个页面 <div class="slide">slide1</div>//可以给每个页面加slide幻灯片 <div class="slide">slide2</div> <div class="slide">slide3</div> </div> <div class="section"><h1>这是第二屏</h1></div> <div class="section">content</div> </div>
<script> $(document).ready(function(){ $('#fullpage').fullpage(); })//在加载fullpage的时候引入fullpage方法。 </script>
五、配置项
1.sectionColor:
2.controlArrows:
3.verticalCentered:
4.resize:
![](/qrcode.jpg)
5.scrollingSpeed:
6.anchors:
7.lockAnchors:
8.active:
9.easing:
10.css3:
11.loopTop:
12.loopBottom:
13.loopHorizontal:
14.autoScrolling:
15.scrollBar:
16.paddingTop/paddingBottom:
17.fixedElements:
18.keyboardScrolling:
19.touchSensitivity:
20.continuousVertical:
是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容,不要同时设置。
21.animateAnchor:
22..recordHistory:
是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false。23.menu:
绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器24..navigation:
是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航。25.navigationPosition:
导航小圆点的位置,可以设置为left或right。26.navigationTooltips:
导航小圆点的tooltips设置鼠标经过时显示的名字,默认为[],注意按照顺序设置。27.showActiveTooltip:
是否显示当前页面的导航的tooltip信息,默认为false28.slidesNavigation:
是否显示横向幻灯片的导航,默认false。29.slidesNavPosition:
横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom30.scrollOverflow:
内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。31.slimscroll:
插件主要用于模拟传统的浏览器滚动条。
32.sectionSelector:
33.slideSelector:
六、方法
1.moveSectionUp():
2.moveSectionDown():
3.moveTo(section,slide):
4.slientMoveTo(section,slide):
5.moveSlideRight():
6.moveSlideLeft():
7.slientMoveTo(section,slide):
8.moveSlideRight():
9.moveSlideLeft():
10.setAutoScrolling(boolean):
11.setLockAnchors(boolean):
12.setRecordHistory(boolean):
13.setScrollingSpeed(milliseconds):
14.setAllowScrolling(boolean,[directions]):
15.destroy(type)
16.reBuild()
七、fullPage支持延迟加载图片和视频(Lazy Loading)
八、回调函数
1.afterLoad(anchorLink,index)
滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接受anchorLink和index两个参数,anchorLink是锚链接的名称,index是序号,从1开始计算。我们可以根据anchorLink和index参数值的判断,触发相应的事件。
2.onleave(index,nextIndex,direction)
在我们离开一个section时,会触发一次此回调函数,接受index、nextIndex和direction 3个参数:index是离开的“页面”的序号,从1开始计算;
nextIndex是滚动到的目标“页面”的序号,从1开始计算;
direction判断往上滚动还是往下滚动,值是up或down。
通过return false;可以取消滚动
3.afterRender()
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数。4.afterResize()
浏览器窗口尺寸改变后的回调函数5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某一幻灯片后的回调函数,与afterLoad类似,接受anchorLink、index、slidIndex、direction4个参数。6.onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们离开一个slide时,会触发一次此回调函数,与onLeave类似,接收anchorLink、index、slideIndex、direction4个参数.设计页面
.准备文字和图片素材
.按照设计实现基本的页面效果
.实现动画
2.scale()方法用于放大或压缩元素的大小,按照提供的每一个值,将调用transform的scale方法。
3.rotate(deg)方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的transform属性上。
4.eng()方法用于Move.js代码片段的结束,它标识动画的结束。技术上,该方法触发动画的播放。该方法接受一个可选的callback回掉函数。
参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo
一、简介
fullPage.js 是一个基于jQuery的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
二、获取方式:
四、如何使用:
<div id="fullpage"> <div class="section"> //每一个session对应一个页面 <div class="slide">slide1</div>//可以给每个页面加slide幻灯片 <div class="slide">slide2</div> <div class="slide">slide3</div> </div> <div class="section"><h1>这是第二屏</h1></div> <div class="section">content</div> </div>
<script> $(document).ready(function(){ $('#fullpage').fullpage(); })//在加载fullpage的时候引入fullpage方法。 </script>
五、配置项
1.sectionColor:
2.controlArrows:
3.verticalCentered:
4.resize:
5.scrollingSpeed:
6.anchors:
7.lockAnchors:
8.active:
9.easing:
10.css3:
11.loopTop:
12.loopBottom:
13.loopHorizontal:
14.autoScrolling:
15.scrollBar:
16.paddingTop/paddingBottom:
17.fixedElements:
18.keyboardScrolling:
19.touchSensitivity:
20.continuousVertical:
是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容,不要同时设置。
21.animateAnchor:
22..recordHistory:
是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false。23.menu:
绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器24..navigation:
是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航。25.navigationPosition:
导航小圆点的位置,可以设置为left或right。26.navigationTooltips:
导航小圆点的tooltips设置鼠标经过时显示的名字,默认为[],注意按照顺序设置。27.showActiveTooltip:
是否显示当前页面的导航的tooltip信息,默认为false28.slidesNavigation:
是否显示横向幻灯片的导航,默认false。29.slidesNavPosition:
横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom30.scrollOverflow:
内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。31.slimscroll:
插件主要用于模拟传统的浏览器滚动条。
32.sectionSelector:
33.slideSelector:
六、方法
1.moveSectionUp():
2.moveSectionDown():
3.moveTo(section,slide):
4.slientMoveTo(section,slide):
5.moveSlideRight():
6.moveSlideLeft():
7.slientMoveTo(section,slide):
8.moveSlideRight():
9.moveSlideLeft():
10.setAutoScrolling(boolean):
11.setLockAnchors(boolean):
12.setRecordHistory(boolean):
13.setScrollingSpeed(milliseconds):
14.setAllowScrolling(boolean,[directions]):
15.destroy(type)
16.reBuild()
七、fullPage支持延迟加载图片和视频(Lazy Loading)
八、回调函数
1.afterLoad(anchorLink,index)
滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接受anchorLink和index两个参数,anchorLink是锚链接的名称,index是序号,从1开始计算。我们可以根据anchorLink和index参数值的判断,触发相应的事件。
2.onleave(index,nextIndex,direction)
在我们离开一个section时,会触发一次此回调函数,接受index、nextIndex和direction 3个参数:index是离开的“页面”的序号,从1开始计算;
nextIndex是滚动到的目标“页面”的序号,从1开始计算;
direction判断往上滚动还是往下滚动,值是up或down。
通过return false;可以取消滚动
3.afterRender()
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数。4.afterResize()
浏览器窗口尺寸改变后的回调函数5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某一幻灯片后的回调函数,与afterLoad类似,接受anchorLink、index、slidIndex、direction4个参数。6.onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们离开一个slide时,会触发一次此回调函数,与onLeave类似,接收anchorLink、index、slideIndex、direction4个参数.设计页面
.准备文字和图片素材
.按照设计实现基本的页面效果
.实现动画
2.scale()方法用于放大或压缩元素的大小,按照提供的每一个值,将调用transform的scale方法。
3.rotate(deg)方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的transform属性上。
4.eng()方法用于Move.js代码片段的结束,它标识动画的结束。技术上,该方法触发动画的播放。该方法接受一个可选的callback回掉函数。