实现功能:左滑列表项(<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左滑删除效果相关推荐

  1. html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码

    左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...

  2. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  3. 手机端仿ios的1-n级联动脚本二

    假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情 ...

  4. 手机端仿ios的银行下拉脚本五

    代码 假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧 ...

  5. 仿qq左滑删除listview_Java基于Swing和Netty仿QQ界面聊天小项目

    点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多 来源:b ...

  6. android listview标题置顶,Android仿QQ左滑删除置顶ListView操作

    最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件 上代码 i ...

  7. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  8. 移动端(手机端)页面自适应解决方案—rem布局篇 1

    动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流 ...

  9. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...

  10. PC端手机端百度查排名工具(SEO工具)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kaeX0TZN-1637306311903)(http://cdn.h3blog.com/20211119142524. ...

最新文章

  1. linux下使用source /etc/profile保存配置后,新的环境变量只能在一个终端里面有效
  2. 什么原因导致挖掘机老自动熄火憋车熄火?
  3. Java快速生成20亿数字_关于内存:Java-打印10亿到20亿
  4. 阿里云移动端播放器高级功能---安全播放
  5. Java 实现基于 UDP 的简单 socket 通信
  6. 开源是如何让Android成为移动市场大佬的?
  7. javascript代码_15个最好用的JavaScript代码压缩工具
  8. coreldraw x5 选择工具快捷键_CorelDRAW设置和优化提高工作效率
  9. 禁用Chrome自动更新
  10. Dynamips--RIP协议分析的详细过程1--前期工作准备
  11. JAVA 获取音频文件(ogg格式)毫秒时长
  12. Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect
  13. python码合并txt文件
  14. 计算机社团感恩节免费维修周策划书,【关于感恩节的活动策划】大学感恩节活动策划案_早教感恩节活动策划方案_(2)_亲亲宝贝网...
  15. android simplelistitem1,6.3.1 在列表中显示简单数据(2)
  16. cuda的Pinned Memory(分页锁定内存)
  17. 纯英文拼音交流1声应该表示成0,要不就不知道怎么发音
  18. java mifare_java – 使用SCL010获取Mifare Ultralight的UID
  19. 波士顿房价预测(终版讲解)
  20. 复旦大学计算机保研夏令营

热门文章

  1. SD2.0大会第1天心得
  2. Virtual Earth 添加纽约3D地图
  3. Springboot2.X + screw数据库快速开发文档
  4. readResolve()原理
  5. 超硬核详解SpringClould之Gateway网管【含源码例子】
  6. ElasticSearch学习(五):数据导入之Logstash
  7. 几种开源许可协议(转载)
  8. 41. 和为s的两个数字VS和为s的连续正数序列(C++版本)
  9. VS2015 设置项目依赖项
  10. 阴阳师哪些服务器可以跨系统转移,阴阳师跨系统转服方法介绍 怎么跨系统转服...