move:function(e,context){ e.preventDefault(); var touches = e.touches[0]; number = context.opt.vertical ? touches.pageY : touches.pageX; //获取相对手指触碰屏幕的变化值 var delta = number - context.initNumber; if(context.flag == 'translate'){ //如果需要滑动 context.result = context.lastNumber + delta; //设置滑动的最大值和最小值 context.result = context.result > 0 ? 0 : context.result ; context.result = -context.result > context.diff ? -context.diff : context.result; //动态设置元素css属性 if(context.matrix){ switch (context.matrix) { case 6: context.setNumber(6,context.result) break; case 5: context.setNumber(5,context.result) break; } context.opt.changeTarget.css('-webkit-transform','matrix('+context.params.join(',')+')') }else{ context.opt.changeTarget.css('-webkit-transform',context.str+'('+context.result+'px)') } } },
touchend则判断释放时是否需要执行回调函数
end:function(e,context){ e.preventDefault(); var touches = e.changedTouches[0]; var number = context.opt.vertical ? touches.pageY : touches.pageX, n = number - context.initNumber; //当元素滑动距离大于10 并且最初元素translate值为0同时回调函数存在，则执行回调函数 if(n>10 && context.lastNumber == 0 && context.opt.swipeDown){ context.opt.swipeDown() }else if(n<-10 && context.lastNumber == -context.diff && context.opt.swipeUp){ context.opt.swipeUp(); } //将常量设为结果值，能保证多次连贯滑动 context.lastNumber = context.result; }
基本上一个简单的jQuery插件就完成了,框架如下
;(function($){ var a = function(m,n){ //函数内容 }; a.prototype = { init:function(){ }, start:function(){ }, move:function(){ }, end:function(){ }, setNumber:function(){ } } $.fn.scrol = function(o){ var obj = new a(this,o); return obj.init() } })(jQuery)
调用时如下：
$(".outer").simuScroll({ 'outerHeight':$(".outer").height(), 'innerHeight':$('.inner').height(), 'changeTarget' : $(".inner"), 'swipeUp' :function(){ console.log('up') }, 'swipeDown' :function(){ console.log('down') }, vertical:true })
以上所述是小编给大家介绍的JS+CSS3模拟溢出滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: