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

r囧r小猫 2021-09-30 07:50 336阅读 0赞

原文地址http://blog.csdn.net/pvfhv/article/details/3449803/\#

源码：

(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);

案例：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>手势+鼠标</title>
            <style type="text/css">
                #div1 {
         
                    text-align: center;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    background: yellow;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                }
            </style>
        </head>
    
        <body>
            <div id="div1"></div>
            <script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
            <script src="jquery.swipe.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $('#div1').swipe({
                    left: function(){
                        $(this).text('向左运动');
                    },
                    right: function(){
                        $(this).text('向右运动');
                    },
                    up: function(){
                        $(this).text('向上运动');
                    },
                    down: function(){
                        $(this).text('向下运动');
                    }
                });
            </script>
        </body>
    
    </html>

转载于:https://www.cnblogs.com/supe/p/6599754.html

发表评论取消回复

表情：

评论列表（有 0 条评论，336人围观）

还没有评论，来说两句吧...

相关阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

港控/mmm°/ 2023年10月18日 13:36/ 0 赞/ 95 阅读

相关 uniapp实现页面左右滑动，上下滑动事件

实现代码： <view class="" @touchstart="touchstart" @touchend="touchend"> </view>

忘是亡心i/ 2022年11月18日 02:29/ 0 赞/ 599 阅读

相关 unity3d中上下左右键控制移动

using UnityEngine; using System.Collections; public class MoveByA

ゝ一纸荒年。/ 2022年09月23日 11:50/ 0 赞/ 473 阅读

相关插件介绍：bootstrap 左右移动多选框插件~Multiselect

官网： [http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/\docu

我会带着你远行/ 2022年06月15日 06:17/ 0 赞/ 370 阅读

相关前端插件之头部tab栏左右滑动

效果图： ![20170901133831094][] 1.css部分 <meta name="viewport" content="width=devic

Love The Way You Lie/ 2022年06月08日 20:45/ 0 赞/ 395 阅读

相关移动端上下左右滑动事件

注意：要用on方法 $(".activity\_goods").on("touchstart",'.activity\_goods\_left',function(e) \{

浅浅的花香味﹌/ 2022年05月15日 08:27/ 0 赞/ 278 阅读

相关两个select左右移动、上下移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

ゞ浴缸里的玫瑰/ 2022年04月14日 05:47/ 0 赞/ 222 阅读

相关用jQuery实现div的上下左右移动

html代码 <input type="button" value="向左" id="left"> <input type="button" value

雨点打透心脏的1/2处/ 2022年03月10日 03:38/ 0 赞/ 554 阅读

相关 CSS3实现左右摆动和上下滑动

1、上下滑动 award { position: absolute; top:

秒速五厘米/ 2021年11月05日 13:28/ 0 赞/ 619 阅读

相关【转载】移动开发中的上下左右滑动插件jquery.swipe.js

原文地址http://blog.csdn.net/pvfhv/article/details/3449803/\ 源码： (function($) {

r囧r小猫/ 2021年09月30日 07:50/ 0 赞/ 337 阅读