欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery实现移动端按钮组左右滑动

时间:2023-02-16 09:33:14|栏目:jquery|点击:

本文实例为大家分享了jquery实现移动端按钮组左右滑动的具体代码,供大家参考,具体内容如下

学习移动端触摸相关功能时写了一个例子,共享一下,其中最不好理解的是screen、page、client相对坐标的问题,我画了一个简图帮助记忆:

jquery插件源码:

//按钮滑动插件
    +(function ($, w, d, undefined) {
 
        jQuery.fn.slideLeftRight = function () {
            var start = null;//每一次触屏的开始位置
            var current = 0;//滑动过程中的位置
            var end = 0;//滑动结束时的触屏位置
            var _this = null;//对象代理
            $(this).css({ "white-space": "nowrap", "position": "absolute", "left": 0, "overflow": "hidden" })
                 .parent().css({ "position": "relative", "overflow": "hidden" });
            _this = this;
            var  wwidth=$(window).width();//浏览器的宽度
            //对象left位置
            var _obj_left = $(this).css("left") == "auto" ? 0 : parseInt($(this).css("left"));
            var objWidth = $(_this).width();
            $(_this).on({
                touchstart: function () {
                    var target = event.changedTouches[0];
                    start = target.pageX;
                    current = target.pageX;
                },
                touchmove: function () {
                    var target = event.changedTouches[0];
                    $(_this).css("left", _obj_left + (target.pageX - start));
                    current = target.pageX
                }, touchend: function () {
                    var target = event.changedTouches[0];
                    end = target.pageX;
                    _obj_left = _obj_left + (target.pageX - start);
 
                    if (start > end ) {
                        //左  
                        //浏览器的宽度 小于对象的宽度
                        if (objWidth > wwidth) {
                            //对象的宽度 -  对象left < 浏览器的宽度
                            if (objWidth -  Math.abs( _obj_left)  < wwidth) {
                                var objLeft = objWidth - wwidth;
                                $(_this).animate({ "left": -objLeft });
                                _obj_left = -objLeft;
                            }
                        } else {
                            //浏览器的宽度 >=  对象的宽度
                            $(_this).animate({ "left": "0"});
                            _obj_left = 0;
                        }
 
                    } else if (start <= end) {
                        //右
                        if (_obj_left > 0) {
                            $(_this).animate({"left":"0"});
                            _obj_left = 0;
                        }
                    }
                }
            });
        };
})(jQuery, window, document);

上一篇:jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可

栏    目:jquery

下一篇:没有了

本文标题:jquery实现移动端按钮组左右滑动

本文地址:http://www.codeinn.net/misctech/225833.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有