| 标题 | Zepto插件：手机网站封装好的touch事件js |
| 范文 | 最近公司开发手机网站，本人主要负责前端这块的工作，考虑到jquery脚本库体质大的问题，选择用Zepto脚本框架，对于手机网站，滑动屏幕事件是频繁用到的，所以经过一小段时间的研究，本人做了一个基于Zepto.js的插件，主要是对手机网站 上划，下滑，左划，右滑事件的封装。具体代码如下： (function($) { $.fn.touchwipe = function(settings) { var config = { min_move_x: 50, min_move_y: 20, wipeLeft: function() { }, wipeRight: function() { }, wipeUp: function() { }, wipeDown: function() { }, preventDefaultEvents: false }; if (settings) $.extend(config, settings); this.each(function() { var startX; var startY; var isMoving = false; var directionLocked = null; function cancelTouch() { this.removeEventListener('touchmove', onTouchMove); startX = null; isMoving = false; directionLocked = false; } function onTouchMove(e) { if(config.preventDefaultEvents) { e.preventDefault(); } if(isMoving) { var x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX; var y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY; var dx = startX - x; var dy = startY - y; var absDistX = Math.abs(dx); var absDistY = Math.abs(dy); if (directionLocked === "y") { return } else { if (directionLocked === "x") { e.preventDefault() } else { absDistX = Math.abs(dx); absDistY = Math.abs(dy); if (absDistX < 4) { return } if (absDistY > absDistX ) { dx = 0; directionLocked = "y"; return } else { e.preventDefault(); directionLocked = "x" } } } if(absDistX >= config.min_move_x) { cancelTouch(); if(dx > 0) { config.wipeLeft(); } else { config.wipeRight(); } } } } function onTouchStart(e) { if (e.touches.length == 1) { startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX; startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY; isMoving = true; directionLocked = false; this.addEventListener('touchmove', onTouchMove, false); } } if ('ontouchstart' in document.documentElement) { this.addEventListener('touchstart', onTouchStart, false); } }); return this; }; })(Zepto); |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。