jQuery:手機端可移動標題
function touchTitle(obj,fun){ var startX=0,startY=0,moveX=0,moveY=0,endX=0,endY=0,changeX=0,changeY=0; var ele=obj.ele!==undefined?$(obj.ele):false; var length=obj.length!==undefined?obj.length:false; var fun=fun!==undefined?fun:false; var child=ele.children('li'); var width=child.eq(0).width(); var height=child.eq(0).outerHeight(); var len=child.length; ele.width(length*width); if(len>length){ for (i=0;i<len;i++){ if (Math.floor(i/length)>0){ child.eq(i).css('margin-top',-height+'px'); child.eq(i).css('margin-left',i*width+'px'); }; child.eq(i).css('float','left'); }; ele.on('touchstart',function(e){ marginLeft=parseInt(ele.css('margin-left')); startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; }); ele.on('touchmove',function(e){ moveX = e.originalEvent.changedTouches[0].pageX; moveY = e.originalEvent.changedTouches[0].pageY; changeX=moveX-startX; changeY=moveY-startY; if ((marginLeft>=0)&&(changeX>0)){ ele.css('margin-left',0); }else if ((marginLeft<=(length-len)*width)&&(changeX<0)){ ele.css('margin-left',(length-len)*width); }else{ if (marginLeft+changeX>=0){ ele.css('margin-left',0); }else if((marginLeft+changeX<=(length-len)*width)){ ele.css('margin-left',(length-len)*width); }else{ ele.css('margin-left',marginLeft+changeX+'px'); }; }; }); ele.on('touchend',function(e){ endX = e.originalEvent.changedTouches[0].pageX; endY = e.originalEvent.changedTouches[0].pageY; if (changeX<0){ ele.marginLeft=(marginLeft-width)+'px'; } if (changeX>0){ ele.marginLeft=(marginLeft+width)+'px'; marginLeft=parseInt(ele.css('margin-left')); }; }); }; if(fun!==false){fun();}; };