广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery实现移动端按钮组左右滑动
  • 887
分享到

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

2024-04-02 19:04:59 887人浏览 独家记忆
摘要

本文实例为大家分享了Jquery实现移动端按钮组左右滑动的具体代码,供大家参考,具体内容如下 学习移动端触摸相关功能时写了一个例子,共享一下,其中最不好理解的是screen、page

本文实例为大家分享了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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://www.lsjlt.com/news/140812.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery实现移动端按钮组左右滑动
    本文实例为大家分享了jquery实现移动端按钮组左右滑动的具体代码,供大家参考,具体内容如下 学习移动端触摸相关功能时写了一个例子,共享一下,其中最不好理解的是screen、page...
    99+
    2022-11-13
  • jquery怎么实现移动端按钮组左右滑动
    本文小编为大家详细介绍“jquery怎么实现移动端按钮组左右滑动”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery怎么实现移动端按钮组左右滑动”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。学习移动端触摸...
    99+
    2023-06-29
  • Vue可左右滑动按钮组组件怎么用
    这篇文章将为大家详细讲解有关Vue可左右滑动按钮组组件怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下左右两箭头控制按钮组左右移动,双击到最左或最右边,功能比较简单。如下所示<tem...
    99+
    2023-06-29
  • Vue可左右滑动按钮组组件使用详解
    本文实例为大家分享了基于Vue可左右滑动按钮组组件,供大家参考,具体内容如下 左右两箭头控制按钮组左右移动,双击到最左或最右边,功能比较简单。如下所示 <template&g...
    99+
    2022-11-13
  • 如何使用jQuery实现鼠标点击左右按钮滑动切换
    这篇文章主要为大家展示了“如何使用jQuery实现鼠标点击左右按钮滑动切换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery实现鼠标点击左右按钮...
    99+
    2022-10-19
  • 如何在Android中实现渐显按钮的左右滑动效果
    先看下运行效果:    程序结构: MainActivity文件中代码: 代码如下:package com.android.buttonpageflippe...
    99+
    2022-06-06
    动效 按钮 Android
  • Android实现评论栏随Recyclerview滑动左右移动
    最近在玩一个叫“约会吧”的应用,也是在看直播app,默认下载安装的,安装点进去看这个应用做的不错,就留下来了。然后看他们动态详情页底部有一个效果:Recyclerview滑动到...
    99+
    2022-06-06
    recyclerview Android
  • HTML如何实现移动端手指操控左右滑动的菜单
    这篇文章主要介绍HTML如何实现移动端手指操控左右滑动的菜单,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> ...
    99+
    2022-10-19
  • Jquery实现多选下拉列表左右移动
    本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码,供大家参考,具体内容如下 jquery实现核心代码 //需求:实现下拉列表选择条目左右选择功能         ...
    99+
    2022-11-13
  • vue实现移动端的开关按钮
    本文实例为大家分享了vue实现移动端的开关按钮的具体代码,供大家参考,具体内容如下 逻辑: 1.写一个椭圆形的div 2.动态改变这个椭圆形的div的背景颜色 3.写一个圆点,这个圆...
    99+
    2022-11-13
  • 如何使用jQuery实现滑动开关按钮效果
    这篇文章主要为大家展示了“如何使用jQuery实现滑动开关按钮效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery实现滑动开关按钮效果”这篇文...
    99+
    2022-10-19
  • Android怎么实现菜单左右滑动
    在Android中,实现菜单左右滑动可以通过使用ViewPager和Fragment来实现。下面是实现的步骤:1. 在布局文件中,添...
    99+
    2023-09-28
    Android
  • Android实现图片左右滑动效果
    关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现。接下来就让我们开始实现这种效果。 接...
    99+
    2022-06-06
    图片 动效 Android
  • vue实现顶部左右滑动导航
    日常开发中经常用到导航这些东西,写篇文章记录下。该导航实现为点击末尾/起首位置,导航自动滑动出下一项的效果。 思路:判断当前点击项,相对与屏幕的位置,若点击的位置,满足可移动的限制,...
    99+
    2022-11-12
  • Android实现左右滑动切换图片
    简要说明 本文采用ImageSwitcher实现左右滑动切换图片。首先调用setFactory方法,设置视图工厂;然后设置手指触碰监听,判断左滑右滑进而切换图片。 本地图片 xml ...
    99+
    2022-11-13
  • Androidstudio实现左右滑动切换图片
    本文实例为大家分享了Android studio实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 切换图片首先要使用到图片切换器ImageSwitcher 先了解一下Imag...
    99+
    2022-11-13
  • vue怎么实现左右滑动选择日期组件
    今天小编给大家分享一下vue怎么实现左右滑动选择日期组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图:1、安装day...
    99+
    2023-06-29
  • vue实现移动端拖拽悬浮按钮
    目录功能介绍:大致需求:整体思路:具体实现:一、position:fixed布局:二、touch事件绑定:三、页面引入:本文实例为大家分享了vue实现移动端拖拽悬浮按钮的具体代码,供...
    99+
    2022-09-27
  • Jquery实现图片左右自动滚动示例
    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>基于jQuery的控制左右滚动效果_自...
    99+
    2022-11-15
    图片左右滚动 自动滚动
  • ViewPager+RadioGroup实现左右滑动卡片布局
    本文实例为大家分享了ViewPager+RadioGroup实现左右滑动卡片布局的具体代码,供大家参考,具体内容如下 效果如图所示: 1.选择某个界面时,对应的第几个小圆点亮: ...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作