用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】

本文主要是介绍用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

touchstart事件:当一开始触摸时所获取触发的【就算不滑动也会触发】

touchend事件:当离开触摸屏时所触发的事件

touchmove事件:当你触摸时滑动时连续发生的事件

刚开始触碰,目的要实现互动在一定的范围内滑动一个图标,超过一定的值时跳转到下一页。

  1. 要实现该效果的图标【这里我是在类里面用背景图放入我需要的图片】
    <a href="javascript:;" class="part1-touch" id="part1-touch"></a>
    
  2.         //获取到那张图片的节点 var touch = document.getElementById('part1-touch');//定义变量 var startIndex, endIndex, swiper, touchIndex, tranX, tranBack;//touchstart事件touch.addEventListener('touchstart', function(event) {event.preventDefault();var touch = event.changedTouches[0];console.log('start' + touch.pageX);startIndex = touch.pageX;//获取到刚开始的X轴上的值});//touchmove事件touch.addEventListener('touchmove', function(event) {event.preventDefault();touchIndex = event.changedTouches[0].pageX; //获取到移动时不断改变的X轴上的值tranX = touchIndex - startIndex;//移动过程中X轴上的差值console.log(tranX);// 在一定区域里面移动,这里限制在一定区域内移动,图标不超过规定的区域if (tranX > 50) {tranX = 50;} else if (tranX < -50) {tranX = -50;}//实时显示图标的位置$('.part1-touch').css("transform", "translateX(" + tranX + "px)");});//touchend事件 touch.addEventListener('touchend', function(event) {event.preventDefault();//获取最终触摸的X轴(手指离开屏幕时获取的)    endIndex = event.changedTouches[0].pageX;tranBack = endIndex - startIndex;console.log(tranBack);console.log(Math.abs(tranBack));//在这里同样计算差值if (Math.abs(tranBack) > 50) {$('.kv').hide();}$('.part1-touch').css("transform", "translateX(0px)");});
    

    在这里我在touchmove和touchend都分别计算了差值,其实他们的差值是一样的,可是为什么我要写两个呢?在touchmove里面算的差值,我是想来控制他显示的区域 ,在touchend里面的差值我想用来计算是否超出要滑动的距离来触发隐藏该页面的。所以两者的用处是不一样的。然而在最下面的这句话则是实现了松开手的时候,该图标立马返回原位置。

     $('.part1-touch').css("transform", "translateX(0px)");

    因为上面纯碎是个人的领悟,自身能力有限,只是写出来基于参考一下。欢迎大佬们留言说一下还有什么其他方法。

这篇关于用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/550104

相关文章

MySQL的隐式锁(Implicit Lock)原理实现

《MySQL的隐式锁(ImplicitLock)原理实现》MySQL的InnoDB存储引擎中隐式锁是一种自动管理的锁,用于保证事务在行级别操作时的数据一致性和安全性,本文主要介绍了MySQL的隐式锁... 目录1. 背景:什么是隐式锁?2. 隐式锁的工作原理3. 隐式锁的类型4. 隐式锁的实现与源代码分析4

如何通过Golang的container/list实现LRU缓存算法

《如何通过Golang的container/list实现LRU缓存算法》文章介绍了Go语言中container/list包实现的双向链表,并探讨了如何使用链表实现LRU缓存,LRU缓存通过维护一个双向... 目录力扣:146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2.

MySQL中Next-Key Lock底层原理实现

《MySQL中Next-KeyLock底层原理实现》Next-KeyLock是MySQLInnoDB存储引擎中的一种锁机制,结合记录锁和间隙锁,用于高效并发控制并避免幻读,本文主要介绍了MySQL中... 目录一、Next-Key Lock 的定义与作用二、底层原理三、源代码解析四、总结Next-Key L

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.

Redis实现RBAC权限管理

《Redis实现RBAC权限管理》本文主要介绍了Redis实现RBAC权限管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1. 什么是 RBAC?2. 为什么使用 Redis 实现 RBAC?3. 设计 RBAC 数据结构

SpringBoot基于沙箱环境实现支付宝支付教程

《SpringBoot基于沙箱环境实现支付宝支付教程》本文介绍了如何使用支付宝沙箱环境进行开发测试,包括沙箱环境的介绍、准备步骤、在SpringBoot项目中结合支付宝沙箱进行支付接口的实现与测试... 目录一、支付宝沙箱环境介绍二、沙箱环境准备2.1 注册入驻支付宝开放平台2.2 配置沙箱环境2.3 沙箱

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co

python中列表list切分的实现

《python中列表list切分的实现》列表是Python中最常用的数据结构之一,经常需要对列表进行切分操作,本文主要介绍了python中列表list切分的实现,文中通过示例代码介绍的非常详细,对大家... 目录一、列表切片的基本用法1.1 基本切片操作1.2 切片的负索引1.3 切片的省略二、列表切分的高

基于Python实现一个PDF特殊字体提取工具

《基于Python实现一个PDF特殊字体提取工具》在PDF文档处理场景中,我们常常需要针对特定格式的文本内容进行提取分析,本文介绍的PDF特殊字体提取器是一款基于Python开发的桌面应用程序感兴趣的... 目录一、应用背景与功能概述二、技术架构与核心组件2.1 技术选型2.2 系统架构三、核心功能实现解析

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重