前端页面经常用到滑动事件,即判断是动作左滑、右滑、上滑或者下滑,然后根据事件类型完成不同的功能,最常见的就是H5的翻页,如果需要的事件很简单,就是判断一下滑动方向然后执行回调函数,那么如果引用较大的插件将会十分影响页面的加载速度。
下面就分享一个简单的滑动事件的插件,轻量好用。
直接贴代码
var TouchTool = function(param) { var self = this; this.dh = document.documentElement.clientHeight; this.direction = param.direction || ‘vertical‘; this.device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase()); this.sx = this.sy = this.ex = this.ey = this.mx = this.my = this.speedx = this.speedy = this.st = this.et = 0; this.obj = param.obj; this.len = this.obj.length; this.startEvtName = this.device ? "touchstart" : "mousedown"; this.moveEvtName = this.device ? "touchmove" : "mousemove"; this.endEvtName = this.device ? "touchend" : "mouseup"; console.log(this.obj) this.touchStart = function(e) { var e = e || event; self.st = new Date().getTime(); self.sx = self.device ? e.touches[0].clientX : e.clientX; self.sy = self.device ? e.touches[0].clientY : e.clientY; self.obj.addEventListener(self.moveEvtName, self.touchMove); self.obj.addEventListener(self.endEvtName, self.touchEnd); } this.touchMove = function(e) { var e = e || event; self.ex = self.device ? e.touches[0].clientX : e.clientX; self.ey = self.device ? e.touches[0].clientY : e.clientY; } this.touchEnd = function(e) { var e = e || event; self.et = new Date().getTime(); self.obj.removeEventListener(self.moveEvtName, self.touchMove); self.obj.removeEventListener(self.endEvtName, self.touchEnd); self.ex = self.ex; self.ey = self.ey; self.mx = self.ex - self.sx; self.my = self.ey - self.sy; self.speedx = Math.abs(self.mx / (self.et - self.st)); self.speedy = Math.abs(self.my / (self.et - self.st)); if(self.direction == ‘horizontal‘) { if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx > 0) { if(typeof param.slideRight != ‘undefined‘) { param.slideRight(); } }; if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx < 0) { if(typeof param.slideLeft != ‘undefined‘) { param.slideLeft(); } }; } if(self.direction == ‘vertical‘) { if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my > 0) { if(typeof param.slideDown != ‘undefined‘) { param.slideDown(); } }; if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my < 0) { if(typeof param.slideUp != ‘undefined‘) { param.slideUp(); } } } } this.obj.addEventListener(this.startEvtName, this.touchStart); }
使用方法:
new TouchTool({ ‘obj‘: document.getElementById(‘touchBox‘), ‘direction‘: ‘vertical‘, //horizontal水平 vertical垂直 ‘slideUp‘: function() { console.log(‘u‘) }, ‘slideDown‘: function() { console.log(‘d‘) }, ‘slideLeft‘: function() { console.log(‘l‘) }, ‘slideRight‘: function() { console.log(‘r‘) }})
在配置参数里填入要执行的回调函数,就可以使用了,PC端和移动端都适用,很简单有木有
(完)
时间: 2024-10-03 23:26:27