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

个小的模拟手机手指滑动事件的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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值