在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件
fullpage.js插件的API:http://www.dowebok.com/77.html
常用使用方法:
// 配置示例 $.fn.fullpage({ anchors:["page1","page2","page3"], slidesColor:["#fff","#000","#333"] })
//方法调用示例 //moveTo(section, slide)设置屏幕滚动到某个section或slide,两个参数都是某个内容块的索引值或者是锚文本,默认情况下slide的索引被设置为0。 $.fn.fullpage.moveTo(1,0) //有动画效果 $.fn.fullpage.silentMoveTo(1,0) //没有动画效果
//回调函数 $(‘#fullpage‘).fullpage({ anchors: [‘firstPage‘, ‘secondPage‘, ‘thirdPage‘, ‘fourthPage‘, ‘lastPage‘], slidesColor:["#fff","#000","#333","#666","#999"], // 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数。 // anchorLink 是锚链接的名称 // index 是section的索引,从1开始计算 afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 3){ alert("Section 3 ended loading"); } //using anchorLink if(anchorLink == ‘secondSlide‘){ alert("Section 2 ended loading"); } } // 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数 // index 是离开的“页面”的序号,从1开始计算; // nextIndex 是滚动到的“页面”的序号,从1开始计算; // direction 判断往上滚动还是往下滚动,值是 up 或 down。 onLeave: function(anchorLink, index){ var leavingSection = $(this); //after leaving section 2 if(index == 2 && direction ==‘down‘){ alert("Going to section 3!"); } else if(index == 2 && direction == ‘up‘){ alert("Going to section 1!"); } } });
找到一个很不错的帮助文档:帮助文档