JQ手机端手势滑动事件代码
移动（手机+平板）开发中经常会用到手指滑动时调用某些方法，成熟的框架如jQuerymobile，zepto等都有相关的封装，但是在一些轻量级的开发中为了应用这个左右滑动，就把这整个框架引用进来，有点杀鸡用牛刀的感觉。鉴于此，我在最近的项目开发中封装了jquery.swipe.js的插件。
用法:{left:function(){},right:function(){},up:function(){},down:function(){}}
即在手指滑动时自动判断滑动方向，并且无论怎样划动，只会有一个方向，不会有左上，右下这样的方向产生，故每次只会调用一下方向对应的回调函数。在此插件中，由于采用了敏感距离的算法，只有在划动超过该距离时才会实现指定方向的确认，否则划动被视为无效（为什么会有这样的算法？因为我们在滑动时，有可能会出现有意无意的拖动，如果手指稍微触碰一下，就有相应方向的确认，有点与现实不符，故加入了敏感距离，此插件中敏感距离为120，使用者可以自行修改）。
源码：
(function($) { var old = $.fn.swipe; $.fn.swipe = function(option) { var opt = { 'left': $.noop, 'right': $.noop, 'up': $.noop, 'down': $.noop }; if ($.type(option) == 'string') { switch (option.toLowerCase()) { case 'left': if (this.data('opt').left && $.isFunction(this.data('opt').left)) { this.data('opt').left.call(this); } break; case 'right': if (this.data('opt').right && $.isFunction(this.data('opt').right)) { this.data('opt').right.call(this); } break; case 'up': if (this.data('opt').up && $.isFunction(this.data('opt').up)) { this.data('opt').up.call(this); } break; case 'down': if (this.data('opt').down && $.isFunction(this.data('opt').down)) { this.data('opt').down.call(this); } break; default: break; } return this; } else if ($.isPlainObject(option)) { var clone = {}; //大小写不敏感处理 $.each(option, function(k, v) { clone[k.toLowerCase()] = v; }); $.extend(opt, clone); return this.each(function(index, ele) { //敏感距离 var dis = 120; //各元素赋值，备直接触发时用 $(ele).data('opt', $.extend({}, opt)).on('touchstart mousedown',function(e){ var ev=e.type=='touchstart'?e.originalEvent.touches[0]:e, startX = ev.pageX, startY = ev.pageY, startLeft = $(this).position().left, startTop = $(this).position().top, start = { left: startLeft, top: startTop }, disX = startX - startLeft, disY = startY - startTop; $(document).on('touchmove.swipe.founder mousemove.swipe.founder',function(e){ var ev=e.type=='touchmove'?e.originalEvent.touches[0]:e; if (opt.left != $.noop || opt.right != $.noop) { $(ele).css('left', ev.pageX - disX - $(ele).offsetParent().offset().left + 'px'); } if (opt.up != $.noop || opt.down != $.noop) { $(ele).css('top', ev.pageY - disY - $(ele).offsetParent().offset().top + 'px'); } e.preventDefault(); }); $(document).on('touchend.swipe.founder mouseup.swipe.founder',function(e){ var ev=e.type=='touchend'?e.originalEvent.changedTouches[0]:e, endX = ev.pageX, endY = ev.pageY, x = Math.abs(endX - startX), y = Math.abs(endY - startY), direction = null; //必须在指定dis大小外，消除敏感距离 direction = x >= y ? (endX < startX ? (Math.abs(endX - startX) > dis ? 'left' : null) : (Math.abs(endX - startX) > dis ? 'right' : null)) : (endY < startY ? (Math.abs(endY - startY) > dis ? 'up' : null) : (Math.abs(endY - startY) > dis ? 'down' : null)); switch (direction) { case 'left': if (opt.left && $.isFunction(opt.left)) { opt.left.call(ele); } break; case 'right': if (opt.right && $.isFunction(opt.right)) { opt.right.call(ele); } break; case 'up': if (opt.up && $.isFunction(opt.up)) { opt.up.call(ele); } break; case 'down': if (opt.down && $.isFunction(opt.down)) { opt.down.call(ele); } break; default: //复位 $(ele).animate({ 'left': start.left + 'px', 'top': start.top + 'px' }); break; } $(document).off('.swipe.founder'); }); }); }); } else { throw new Error('%E5%8F%82%E6%95%B0%E9%94%99%E8%AF%AF！'); } }; $.fn.swipe.noConflict = function() { $.fn.swipe = old; return this; };})(jQuery);案例：手势+鼠标
网站名称：JQ手机端手势滑动事件代码
分享地址：https://www.syh-b.com/qtweb/news28/593328.html
圣合创意、聚焦快消品商业设计品牌整合设计14年；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 圣合创意