前端 html h5 移动端 手机端 仿ios左滑删除效果
实现功能:左滑列表项(<li class="route-item" ></li>),出现删除按钮(<div class="removeJs">删除</div>)。
js部分的代码如下:
1 window.addEventListener('load',function(){ 2 var initX; 3 var moveX; 4 var X = 0; 5 var objX = 0; 6 var width=$(".removeJs").width();//按钮的宽度(removeJs修改为按钮的className) 7 var liClassName=".route-item";//li的className(route-item修改为li的className) 8 $("body").on("touchstart",liClassName,function (event) { 9 var obj=this; 10 initX = event.targetTouches[0].pageX; 11 objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; 12 if( objX == 0){ 13 $("body").on('touchmove',liClassName,function(event) { 14 // event.preventDefault(); 15 var obj=this; 16 moveX = event.targetTouches[0].pageX; 17 X = moveX - initX; 18 if (X > 0) { 19 obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 20 } 21 else if (X < 0) { 22 var l = Math.abs(X); 23 obj.style.WebkitTransform = "translateX(" + -l + "px)"; 24 if(l>width){ 25 l=width; 26 obj.style.WebkitTransform = "translateX(" + -l + "px)"; 27 } 28 } 29 }); 30 } 31 else if(objX<0){ 32 $("body").on("touchmove",liClassName,function (event) { 33 // event.preventDefault(); 34 var obj=this; 35 moveX = event.targetTouches[0].pageX; 36 X = moveX - initX; 37 if (X > 0) { 38 var r = -width + Math.abs(X); 39 obj.style.WebkitTransform = "translateX(" + r + "px)"; 40 if(r>0){ 41 r=0; 42 obj.style.WebkitTransform = "translateX(" + r + "px)"; 43 } 44 } 45 else { //向左滑动 46 obj.style.WebkitTransform = "translateX(" + -width + "px)"; 47 } 48 }); 49 } 50 }) 51 $("body").on("touchend",liClassName,function (event) { 52 var obj=this; 53 objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1; 54 if(objX>-width/2){ 55 obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 56 }else{ 57 obj.style.WebkitTransform = "translateX(" + -width + "px)"; 58 } 59 }) 60 })
View Code
ps:实际项目中,只需修改如下两行代码即可:
var width=$(".removeJs").width();var liClassName=".route-item";
注意:touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动,如果设置了e.preventDefault(),那么列表将无法上下滚动。
ps:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
转载于:https://www.cnblogs.com/ishuanghe/p/7989858.html
前端 html h5 移动端 手机端 仿ios左滑删除效果相关推荐
- html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
- Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
- 手机端仿ios的1-n级联动脚本二
假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情 ...
- 手机端仿ios的银行下拉脚本五
代码 假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧 ...
- 仿qq左滑删除listview_Java基于Swing和Netty仿QQ界面聊天小项目
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多 来源:b ...
- android listview标题置顶,Android仿QQ左滑删除置顶ListView操作
最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件 上代码 i ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇 1
动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- PC端手机端百度查排名工具(SEO工具)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kaeX0TZN-1637306311903)(http://cdn.h3blog.com/20211119142524. ...
最新文章
- linux下使用source /etc/profile保存配置后,新的环境变量只能在一个终端里面有效
- 什么原因导致挖掘机老自动熄火憋车熄火?
- Java快速生成20亿数字_关于内存:Java-打印10亿到20亿
- 阿里云移动端播放器高级功能---安全播放
- Java 实现基于 UDP 的简单 socket 通信
- 开源是如何让Android成为移动市场大佬的?
- javascript代码_15个最好用的JavaScript代码压缩工具
- coreldraw x5 选择工具快捷键_CorelDRAW设置和优化提高工作效率
- 禁用Chrome自动更新
- Dynamips--RIP协议分析的详细过程1--前期工作准备
- JAVA 获取音频文件(ogg格式)毫秒时长
- Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect
- python码合并txt文件
- 计算机社团感恩节免费维修周策划书,【关于感恩节的活动策划】大学感恩节活动策划案_早教感恩节活动策划方案_(2)_亲亲宝贝网...
- android simplelistitem1,6.3.1 在列表中显示简单数据(2)
- cuda的Pinned Memory(分页锁定内存)
- 纯英文拼音交流1声应该表示成0,要不就不知道怎么发音
- java mifare_java – 使用SCL010获取Mifare Ultralight的UID
- 波士顿房价预测(终版讲解)
- 复旦大学计算机保研夏令营
热门文章
- SD2.0大会第1天心得
- Virtual Earth 添加纽约3D地图
- Springboot2.X + screw数据库快速开发文档
- readResolve()原理
- 超硬核详解SpringClould之Gateway网管【含源码例子】
- ElasticSearch学习(五):数据导入之Logstash
- 几种开源许可协议(转载)
- 41. 和为s的两个数字VS和为s的连续正数序列(C++版本)
- VS2015 设置项目依赖项
- 阴阳师哪些服务器可以跨系统转移,阴阳师跨系统转服方法介绍 怎么跨系统转服...