一个模拟手机手指滑动事件的jquery插件

来源：互联网发布：智联招聘java 编辑：程序博客网时间：2024/05/16 08:19

个小的模拟手机手指滑动事件的jquery插件。具备左滑动、右滑动、上滑动、下滑动事件的功能。
随手写的，会有很多不足，希望前端朋友们能够相互补充，完善。
一下是代码，用法：需要对div加左滑动事件，$('div').swipeleft(function(){alert()});};就可以了，function是回调函数.

;(function($){        $.fn.extend({//局部插件，去掉.fn是全局插件                'swipeleft':function(fn){//手指左滑动，fn是回调函数                        $(this).on('touchstart',function(e){                     event.preventDefault();                       e=e.originalEvent.touches[0];//获取对应触摸对象                                var sx=0;                                sx=e.pageX;                                $(this).on('touchend',function(e){                                        e=e.originalEvent.changedTouches[0];//获取对应触摸对象                                        if((sx-e.pageX)>50){//如果滑动距离大于50px就认为是要触发左滑动事件了                                                fn();//调用回调函数                                        }                                        $(this).unbind('touchend');                                });                        });                        return this;                },                'swiperight':function(fn){//手指右滑动，fn是回调函数                        $(this).on('touchstart',function(e){                      event.preventDefault();                        e=e.originalEvent.touches[0];//获取对应触摸对象                                var sx=0;                                sx=e.pageX;                                $(this).on('touchend',function(e){                                        e=e.originalEvent.changedTouches[0];//获取对应触摸对象                                        if((e.pageX-sx)>50){//如果滑动距离大于50px就认为是要触发右滑动事件了                                                fn();//调用回调函数                                        }                                        $(this).unbind('touchend');                                });                        });                },                'swipetop':function(fn){//手指上滑动，fn是回调函数                        $(this).on('touchstart',function(e){                     event.preventDefault();                       e=e.originalEvent.touches[0];//获取对应触摸对象                                var sy=0;                                sy=e.pageY;                                $(this).on('touchend',function(e){                                        e=e.originalEvent.changedTouches[0];//获取对应触摸对象                                        if((sy-e.pageY)>50){//如果滑动距离大于50px就认为是要触发上滑动事件了                                                fn();//调用回调函数                                        }                                        $(this).unbind('touchend');                                });                        });                },                'swipedown':function(fn){//手指下滑动，fn是回调函数                        $(this).on('touchstart',function(e){                     event.preventDefault();                       e=e.originalEvent.touches[0];//获取对应触摸对象                                var sy=0;                                sy=e.pageY;                                $(this).on('touchend',function(e){                                        e=e.originalEvent.changedTouches[0];//获取对应触摸对象                                        if((e.pageY-sy)>50){//如果滑动距离大于50px就认为是要触发下滑动事件了                                                fn();//调用回调函数                                        }                                        $(this).unbind('touchend');                                });                        });                }        });})(jQuery);

1 0