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

 更新时间:2022年03月01日 08:33:33   作者:高彬  
这篇文章主要为大家详细介绍了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隔行变色与普通JS写法的对比

    jQuery隔行变色与普通JS写法的对比

    普通JS写法与jQuery选择器写法,选择table的行,隔一行,选择一行,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

    jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

    这篇文章主要介绍了jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能),想要学习jQuery的可以了解一下。
    2016-11-11
  • jQuery中html()方法用法实例

    jQuery中html()方法用法实例

    这篇文章主要介绍了jQuery中html()方法用法,以实例形式分析了html()方法的功能、定义及使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery代码优化 遍历篇

    jQuery代码优化 遍历篇

    与使用选择符查找页面中的元素相对应,jQuery遍历操作背后的工作机制也很有特色
    2011-11-11
  • 详谈jQuery中使用attr(), prop(), val()获取value的异同

    详谈jQuery中使用attr(), prop(), val()获取value的异同

    下面小编就为大家带来一篇详谈jQuery中使用attr(), prop(), val()获取value的异同。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue-preview缩略图报错解决

    vue-preview缩略图报错解决

    这篇文章主要为大家介绍了vue-preview缩略图报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 老生常谈JQuery data方法的使用

    老生常谈JQuery data方法的使用

    下面小编就为大家带来一篇老生常谈JQuery data方法的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jquery select(列表)的操作(取值/赋值)

    jquery select(列表)的操作(取值/赋值)

    因为工作的原因,从上周开始接触了jquery,以前我是自己写js的函数库,把一些常用的的方法写成函数,现在学习了jquery,发现还真是方便。不尽简洁了很多。用Ajax很方便,而且还可以很方便创造一些特效。
    2009-08-08
  • jQuery入门之层次选择器实例简析

    jQuery入门之层次选择器实例简析

    这篇文章主要介绍了jQuery入门之层次选择器用法,以简单实例形式分析了jQuery层次选择器中ancestor descendant与parent>child的区别,需要的朋友可以参考下
    2015-12-12
  • jQuery中过滤器的基本用法示例

    jQuery中过滤器的基本用法示例

    这篇文章主要介绍了jQuery中过滤器的基本用法,结合简单实例形式分析了jQuery过滤器针对table表格元素属性进行判断与设置的相关操作技巧,需要的朋友可以参考下
    2017-10-10

最新评论