一个简单的WEB前端滑动组件
主页:http://fefeding.github.io/jmSlip/
<scriptsrc="../../src/jmSlip.js"></script><sectionclass="banner js-banner" id="banner"><ul><li></li></ul></section><script>varbanner='banner';//$('.js-banner'); //可以是id或jquery对象或原生nodevarslip=newjmSlip(banner,'page',{direction: 'x',repeat: true//这里用平铺});//窗口改变window.onresize=function(){slip.reset();};</script>element当前组件控制的dom容器。可以是id、jquery对象或原生node对象。type滑动方式，page、scale、drag等。option滑动参数。格式
{"direction": 'x',//type为page时有效。x:横向滑动，y:纵向滑动"onPageStart": function(page){},//翻页结束后执行"onPageEnd" : function(oldpage,newpage){},//滑动开始事件"onTouchStart": function(e){//return false 阻止},//滑动中"onTouchMove": function(e,offset){//return false 阻止//offset: {offx:0,offy:0} 移动距离},//结束滑动"onTouchEnd": function(e,offset){//return false 阻止//offset: {offx:0,offy:0} 移动距离}}按页切换
varslip=newjmSlip(banner1,'page',{//changeTime: 1000, direction: 'x',repeat: false,//是否循环切换，如果为true，当滑到最后一页后依然会从第一页开始向后滑。如果设为true，最好把repeat也指定为falseloop: true,mousewheel:true,//支持滚轮onPageStart: function(page){console.log(page);//if(page > 2) return false; //可按条件阻断翻页},//翻页开始前回调，如果返回false则翻页中止onPageEnd: function(oldpage,newpage){console.log(oldpage);console.log(newpage);},//翻页结束回调onTouchStart: function(evt){console.log(evt);},//滑动开始，返回false中止滑动onTouchMove: function(evt,offset){evt.preventDefault();console.log(evt);console.log(offset);//相对于start的位移},//滑动中，返回false中止onTouchEnd: function(evt){console.log(evt);}//滑动结束，返回false中止});varslip=newjmSlip('wrap','page',{changeTime: 0,//是否循环切换，如果为true，当滑到最后一页后依然会从第一页开始向后滑。如果设为true，最好把repeat也指定为falseloop: true,mousewheel:true,//支持滚轮onPageStart: function(page){console.log(page);},//翻页开始前回调，如果返回false则翻页中止onPageEnd: function(oldpage,newpage){console.log(oldpage);console.log(newpage);},//翻页结束回调onTouchStart: function(evt){console.log(evt);},//滑动开始，返回false中止滑动onTouchMove: function(evt,offset){evt.preventDefault();console.log(evt);console.log(offset);//相对于start的位移},//滑动中，返回false中止onTouchEnd: function(evt){console.log(evt);}//滑动结束，返回false中止});一排滚动，中心位被选中效果。 示例：https://fefeding.github.io/jmSlip/demo/item/index.html
varslip=newjmSlip('banner','item',{//changeTime: 1500, direction: 'x',page: 0,//默认所在项duration: 800,//滚动延时itemOffWidth: 1,//每个项需要计算的偏移量。一般用作间距onTouchStart: function(){//$('#banner li.cur').toggleClass('cur',false);},onTouchMove: function(evt,offset){evt.preventDefault();//找到中间项，然后让它滑过中间时放大varlen=this.instance.containerInner.children.length;varleftwidth=0;varlastoffx=0;varlastindex=0;varmleft=this.instance.container.offsetWidth/2-this.offsetX;//找到离中间最近的项for(vari=0;i<len;i++){varitemw=this.instance.containerInner.children[i].offsetWidth;leftwidth+=itemw;varc=leftwidth-itemw/2;if(c>=mleft){varcuroffx=Math.abs(c-mleft);if(lastindex!=i){varsc=Math.max((1-lastoffx/itemw),0)*0.2+0.8;$('#banner li').eq(lastindex).css('transform','scale3d('+sc+', '+sc+', 1)');}varsc=Math.max((1-curoffx/itemw),0)*0.2+0.8;$('#banner li').eq(i).css('transform','scale3d('+sc+', '+sc+', 1)');break;}//离项中间的距离lastoffx=Math.abs(mleft-c);lastindex=i;}},onPageStart: function(p){//限制这跳到第三个项，超过注返回第三个/*if(p > 2) { this.go(2); return false; }*/},onPageEnd: function(oldPage,newPage){setTimeout(function(){$('#banner li.cur').toggleClass('cur',false);$('#banner li').eq(newPage).toggleClass('cur',true);},100);}});主要用于图片的缩放操作 示例：https://fefeding.github.io/jmSlip/demo/scale/index.html
varslip=newjmSlip(container,'scale',{target: container.find('img')[0],//被操作的img对象supportTranslate: true,//是否支持移动maxScale: 4,//最大放大4倍minScale: 0.1,//最小缩小到10%onTouchMove: function(e){//if(e.offsetPos.length == 2)container.append(JSON.stringify(e.offsetPos));},onScaleStart: function(per,e){container.append('scale:'+per+'<br />');}});拖放对象，可以做一些贴边操作 示例：https://fefeding.github.io/jmSlip/demo/drag/index.html
varentry=$('.act-enter');varslip=newjmSlip(entry,'drag',{onTouchStart: function(e){e&&e.preventDefault&&e.preventDefault();//阻止默认响应},dragEnd: function(){varoffx=this.offsetX;//当前偏移量varoffy=this.offsetY;varposw=entry.offset().left+entry.width()/2;varwinw=$(window).width();//如果偏左的话，则定到左侧if(posw<=winw/2){offx-=entry.offset().left;}else{offx+=winw-posw-entry.width()/2;}//粘到左右边上this.move(offx,offy);}});跟原生滚动条类似 示例：http://fefeding.github.io/jmSlip/demo/scroll/index.html
列表操作项：http://fefeding.github.io/jmSlip/demo/scroll/scroll_item.html