(function(window,document){var Slide = function(box,judge,fun){if (!(this instanceof Slide)) return new Slide(box,judge,fun);var startx,starty;box.addEventListener("touchstart", function(e) {e.preventDefault(); // 阻止瀏覽器默認事件startx = parseInt(e.touches[0].pageX);starty = parseInt(e.touches[0].pageY);//獲取滑動開始的X,Y值}, false);box.addEventListener("touchend", function(e) {e.preventDefault(); // 阻止瀏覽器默認事件var endx, endy;endx = parseInt(e.changedTouches[0].pageX);endy = parseInt(e.changedTouches[0].pageY);//獲取滑動結束的X,Y值var absx =startx-endx; var absy =starty-endy;//console.log(absx,absy,absy,3)if(judge=="about" || judge=="aboutupdown"){//檢測左右滑動if(Math.abs( absx)>Math.abs(absy)&&Math.abs(absy)>=3){if(absx>0){fun.leftslide();}else {fun.rightslide();}}}if(judge=="updown" || judge=="aboutupdown"){//檢測上下滑動if(Math.abs( absy)>Math.abs(absx)&&Math.abs(absx)>=3){if(absy>0){fun.topslide()}else {fun.bottomslide()}}}})}window.Slide = Slide; })(window,document)
調用方法
//第一個參數為DOM對象Slide(box,"about",{//第二個參數有三個值:左右滑動:about,上下滑動:updown,上下左右:aboutupdownleftslide:function(){//第三個參數可傳入滑動后的操作方法alert("向左滑動了")},rightslide:function(){alert("向右滑動了")},topslide:function(){alert("向上滑動了")},bottomslide:function(){alert("向下滑動了")}})
?