🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

onepagescroll.js is a lightweight jQuery plugin that uses CSS3 transitions and transforms to implement a smooth one page scrolling effect with snapping functionality.

scrolling One-Page-Scrolling

Documentation

基于jQuery的整屏切换效果,支持chrome,firfox,IE(6-new);

update2015/10/10 修复ios上下拖拽,添加误触过滤,增加例外机制;

update2015/6/18 IE8,7滚动距离无法取值;

update2015/6/10 修移动端复step异常;

###配制方法(以test.html为例)

    var onepage = $("#box").onepagescroll({         box: "div",                      //窗口选择器 jq选择器          cycle: 0,                         //是否循环滚屏 IE9(含)以下不支持  默认循环 【可选】          animationTime:0.8,    //滚动持续时间 单位秒 默认0.8s 【可选】         disance:100                 //触摸滑动的最小距离 单位px  默认100  【可选】         exception:["SPAN","test2","test3"]        //例外列表,标签要大写,支持class和id         //添加到例外列表中的元素的显示区域将不会被触发,节省了作禁止冒泡的动作     }, function (o) {               //滚动回调  【可选】         ...【1】     }); 

###添加滚动标记的方法(以test.html为例) 接着上方【1】滚动回调:

    $("#contorl .on").removeClass("on");     $("#contorl span").eq(o.index).addClass("on"); 

滚动之后的返回值o(名字自定义),数据内容:

    index: 当前窗口的角标     viewbox: 当前窗口的jq对象 

注:(不想使用例外机制的时候)窗口内部的子元素需要点击或其他事件,例如span有点击效果,请在事件回调中写入禁止冒泡

###外部手动滚动的方法(以test.html为例) 利用右侧的标记,为其绑定click事件

    $("#contorl span").click(function(){         onepage.change($(this).index());        //调用返回值的change方法 传入当前需要被切换的窗口角标     }); 

You May Also Like