移动开发中的上下左右滑动插件jquery.swipe.js非常经典的啊！

移动开发中的上下左右滑动插件jquery.swipe.js

移动（手机+平板）开发中经常会用到手指滑动时调用某些方法，成熟的框架如jQuery mobile，zepto等都有相关的封装，但是在一些轻量级的开发中为了应用这个左右滑动，就把这整个框架引用进来，有点杀鸡用牛刀的感觉。鉴于此，我在最近的项目开发中封装了jquery.swipe.js的插件。

用法:{left:function(){},right:function(){},up:function(){},down:function(){}}

即在手指滑动时自动判断滑动方向，并且无论怎样划动，只会有一个方向，不会有左上，右下这样的方向产生，故每次只会调用一下方向对应的回调函数。在此插件中，由于采用了敏感距离的算法，只有在划动超过该距离时才会实现指定方向的确认，否则划动被视为无效（为什么会有这样的算法？因为我们在滑动时，有可能会出现有意无意的拖动，如果手指稍微触碰一下，就有相应方向的确认，有点与现实不符，故加入了敏感距离，此插件中敏感距离为120，使用者可以自行修改）。

源码：

[javascript]  view plain  copy

 

1. (function($) {  
2.     var old = $.fn.swipe;  
3.   
4.     $.fn.swipe = function(option) {  
5.         var opt = {  
6.             'left': $.noop,  
7.             'right': $.noop,  
8.             'up': $.noop,  
9.             'down': $.noop  
10.         };  
11.   
12.         if ($.type(option) == 'string') {  
13.             switch (option.toLowerCase()) {  
14.                 case 'left':  
15.                     if (this.data('opt').left && $.isFunction(this.data('opt').left)) {  
16.                         this.data('opt').left.call(this);  
17.                     }  
18.                     break;  
19.                 case 'right':  
20.                     if (this.data('opt').right && $.isFunction(this.data('opt').right)) {  
21.                         this.data('opt').right.call(this);  
22.                     }  
23.                     break;  
24.                 case 'up':  
25.                     if (this.data('opt').up && $.isFunction(this.data('opt').up)) {  
26.                         this.data('opt').up.call(this);  
27.                     }  
28.                     break;  
29.                 case 'down':  
30.                     if (this.data('opt').down && $.isFunction(this.data('opt').down)) {  
31.                         this.data('opt').down.call(this);  
32.                     }  
33.                     break;  
34.                 default:  
35.                     break;  
36.             }  
37.   
38.             return this;  
39.         } else if ($.isPlainObject(option)) {  
40.             var clone = {};  
41.   
42.             //大小写不敏感处理  
43.             $.each(option, function(k, v) {  
44.                 clone[k.toLowerCase()] = v;  
45.             });  
46.   
47.             $.extend(opt, clone);  
48.   
49.             return this.each(function(index, ele) {  
50.                 //敏感距离  
51.                 var dis = 120;  
52.                 //各元素赋值，备直接触发时用  
53.                 $(ele).data('opt', $.extend({}, opt)).on('touchstart mousedown',function(e){  
54.                     var ev=e.type=='touchstart'?e.originalEvent.touches[0]:e,  
55.                         startX = ev.pageX,  
56.                         startY = ev.pageY,  
57.                         startLeft = $(this).position().left,  
58.                         startTop = $(this).position().top,  
59.                         start = {  
60.                             left: startLeft,  
61.                             top: startTop  
62.                         },  
63.                         disX = startX - startLeft,  
64.                         disY = startY - startTop;  
65.                           
66.                     $(document).on('touchmove.swipe.founder mousemove.swipe.founder',function(e){  
67.                         var ev=e.type=='touchmove'?e.originalEvent.touches[0]:e;  
68.                           
69.                         if (opt.left != $.noop || opt.right != $.noop) {  
70.                             $(ele).css('left', ev.pageX - disX - $(ele).offsetParent().offset().left + 'px');  
71.                         }  
72.       
73.                         if (opt.up != $.noop || opt.down != $.noop) {  
74.                             $(ele).css('top', ev.pageY - disY - $(ele).offsetParent().offset().top + 'px');  
75.                         }  
76.                           
77.                         e.preventDefault();  
78.                     });  
79.                       
80.                     $(document).on('touchend.swipe.founder mouseup.swipe.founder',function(e){  
81.                         var ev=e.type=='touchend'?e.originalEvent.changedTouches[0]:e,  
82.                             endX = ev.pageX,  
83.                             endY = ev.pageY,  
84.                             x = Math.abs(endX - startX),  
85.                             y = Math.abs(endY - startY),  
86.                             direction = null;  
87.                           
88.                         //必须在指定dis大小外，消除敏感距离  
89.                         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));  
90.   
91.                         switch (direction) {  
92.                             case 'left':  
93.                                 if (opt.left && $.isFunction(opt.left)) {  
94.                                     opt.left.call(ele);  
95.                                 }  
96.                                 break;  
97.                             case 'right':  
98.                                 if (opt.right && $.isFunction(opt.right)) {  
99.                                     opt.right.call(ele);  
100.                                 }  
101.                                 break;  
102.                             case 'up':  
103.                                 if (opt.up && $.isFunction(opt.up)) {  
104.                                     opt.up.call(ele);  
105.                                 }  
106.                                 break;  
107.                             case 'down':  
108.                                 if (opt.down && $.isFunction(opt.down)) {  
109.                                     opt.down.call(ele);  
110.                                 }  
111.                                 break;  
112.                             default:  
113.                                 //复位  
114.                                 $(ele).animate({  
115.                                     'left': start.left + 'px',  
116.                                     'top': start.top + 'px'  
117.                                 });  
118.                                 break;  
119.                         }  
120.                           
121.                         $(document).off('.swipe.founder');  
122.                     });  
123.                 });  
124.             });  
125.         } else {  
126.             throw new Error('%E5%8F%82%E6%95%B0%E9%94%99%E8%AF%AF！');  
127.         }  
128.     };  
129.   
130.     $.fn.swipe.noConflict = function() {  
131.         $.fn.swipe = old;  
132.         return this;  
133.     };  
134. })(jQuery);  

案例：

[html]  view plain  copy

 

1. <!DOCTYPE html>  
2. <html>  
3.   
4.     <head>  
5.         <meta charset="utf-8">  
6.         <title>手势+鼠标</title>  
7.         <style type="text/css">  
8.             #div1 {  
9.                 text-align: center;  
10.                 width: 100px;  
11.                 height: 100px;  
12.                 line-height: 100px;  
13.                 background: yellow;  
14.                 position: absolute;  
15.                 left: 50%;  
16.                 top: 50%;  
17.             }  
18.         </style>  
19.     </head>  
20.   
21.     <body>  
22.         <div id="div1"></div>  
23.         <script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>  
24.         <script src="jquery.swipe.js" type="text/javascript" charset="utf-8"></script>  
25.         <script type="text/javascript">  
26.             $('#div1').swipe({  
27.                 left: function(){  
28.                     $(this).text('向左运动');  
29.                 },  
30.                 right: function(){  
31.                     $(this).text('向右运动');  
32.                 },  
33.                 up: function(){  
34.                     $(this).text('向上运动');  
35.                 },  
36.                 down: function(){  
37.                     $(this).text('向下运动');  
38.                 }  
39.             });  
40.         </script>  
41.     </body>  
42.   
43. </html>  

至此，网友可以自行下载使用，如遇到请及时发邮件与我通知，以便达到最佳效果。