(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("向下滑動了")}})

?

轉載于:https://www.cnblogs.com/xueyunNO1/p/10136384.html

總結

以上是生活随笔為你收集整理的移动端滑动操作学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。