移动端滑动操作学习

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