js仿即时通信软件中对联系人向左滑动、滑出删除按钮的操作

本文实例为大家分享实现类似即时通信软件中对联系人的操作：向左滑动，滑出删除按钮。滑动超过一半时松开则自动滑到底，不到一半时松开则返回原处。

纯射流研究…实现使用了h5的触摸移动等事件，以及用射流研究…动态改变css3的翻译属性来达到动画效果：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' id=' viewport ' content=' width=device-width，initial-scale=1' titlehtml5向左滑动删除特效/title style * { padd : 0；保证金： 0；列表样式：无；}标题{ background: # f7483b边框-底部： 1px实心#ccc }标题H2 {文本对齐：中心；线高： 54pxfont-size : 16pxcolor: #fff } .list-ul { overflow:隐藏}。list-Li {行高： 60px边框-底部： 1px实心# fcfcfc相对位置：padding: 0 12pxcolor: # 666背景# f2f2-web套件-transform : translateX(0px)；} .btn {位置：绝对值；top : 0；右侧：-80px；文本对齐：中心；背景# ffcb 20 color : # fffwidth : 80px }/style script/* *描述：html5苹果手机向左滑动删除特效*/窗口。addeventlistener(' load '，function(){ var initX；//触摸位置var moveX//滑动时的位置var X=0；//移动距离var Objx=0；//目标对象位置窗户。addeventlistener(' touch start '，function(event){ event。prevent default()；var obj=事件。目标。父节点；如果。类名=' list-Li '){ initX=event。目标触摸[0].pageXobjX=(obj。风格。webkittransform。替换(/translateX \(/g ' ').替换(/px \)/g ' '))* 1；} if(Objx==0){ window。addeventlistener(' touch move ')，function(event){ event。prevent default()；var obj=事件。目标。父节点；如果。类名=' list-Li '){ moveX=event。目标触摸[0].page xx=moveX-initX；if(X=0){ obj。风格。webkittransform=' translateX(' 0 ' px)'；} else if(X ^ 0){ var l=math。ABS(X)；物体。风格。webkittransform=' translateX('-l ' px)'；if(l 80){ l=80；物体。风格。webkittransform=' translateX('-l ' px)'；} } } });} else if(objX 0){ window。addeventlistener(' touch move '，function(event){ event。prevent default()；var obj=事件。目标。父节点；如果。类名=' list-Li '){ moveX=event。目标触摸[0].page xx=moveX-initX；if(X=0){ var r=-80数学。ABS(X)；物体。风格。webkittransform=' translateX(' r ' px)'；if(r 0){ r=0；物体。风格。webkittransform=' translateX(' r ' px)'；} } else { //向左滑动物体。风格。webkittransform=' translateX('-80 ' px)'；} } });} })窗口。addeventlistener(' touch end '，function(event){ event。prevent default()；var obj=事件。目标。父节点；如果。类名=' list-Li '){ objX=(obj。风格。webkittransform。替换(/translateX \(/g ' ').替换(/px \)/g ' '))* 1；if(objX-40){ obj。风格。webkittransform=' translateX '(0 ' px ')；objX=0；} else { obj。风格。webkittransform=' translateX('-80 ' px)'；objX=-80；} } })}))/脚本/床头箱氘消息列表/H2/标题部分=' list ' ul class=' list-ul ' Li id=' Li ' class=' list-Li ' div class=' con '你的快递到了，请到楼下签收/div div class='btn '删除/div/Li Li=' list-Li ' div=' con '哇，你在干嘛，快点来啊就等你了/div div class='btn '删除/div/Li/ul/章节/正文/html做成仄普托插件实际项目中，我们可能有很多个地方会用到这个功能。现在我们将这个功能做成仄普托插件，方便后面使用。

这个插件，我们仅实现这个功能，然后传入参数（删除按钮的样式名),让程序在射流研究…中计算所需要滑动的距离，方便复用。

zepto.touchWipe.js

/** * zepto插件：向左滑动删除动效* 使用方法：$('.items wipe’).触摸擦除({ itemdelete : }).item-delete ' })；* 参数：项目删除删除按钮的样式名*/;（函数($) { $.fn.touchWipe=函数（选项){ var defaults={ itemdelete : } .项目-删除',//删除元素};var opts=$ .扩展({}，默认值，选项);//配置选项var delWidth=$(opts.itemDelete).宽度();var IntX//触摸位置var moveX//滑动时的位置var X=0；//移动距离var Objx=0；//目标对象位置$(这个)。on('touchstart '，function(event){ event。prevent default()；var obj=thisinitX=event。目标触摸[0].pageXobjX=(obj。风格。webkittransform。替换(/translateX \(/g ' ').替换(/px \)/g ' '))* 1；if (objX==0) { $(this).on('touchmove '，function(event){ event。prevent default()；var obj=thismoveX=event。目标触摸[0].page xx=moveX-initX；if(X=0){ obj。风格。webkittransform=' translateX(' 0 ' px)'；} else if(X ^ 0){ var l=math。ABS(X)；物体。风格。webkittransform=' translateX('-l ' px)'；if(l DelWidth){ l=DelWidth；物体。风格。webkittransform=' translateX('-l ' px)'；} } });} else if (objX 0) { $(this).on('touchmove '，function(event){ event。prevent default()；var obj=thismoveX=event。目标触摸[0].page xx=moveX-initX；if(X=0){ var r=-delWidth数学。ABS(X)；物体。风格。webkittransform=' translateX(' r ' px)'；if(r 0){ r=0；物体。风格。webkittransform=' translateX(' r ' px)'；} } else { //向左滑动物体。风格。webkittransform=' translateX('-delWidth ' px)'；} });} }) $(这个)。on('touchend '，function(event){ event。prevent default()；var obj=thisobjX=(obj。风格。webkittransform。替换(/translateX \(/g ' ').替换(/px \)/g ' '))* 1；if(Objx-DelWidth/2){ obj。风格。过渡='全部0.2s '；物体。风格。webkittransform=' translateX(' 0 ' px)'；物体。风格。过渡=“全部0”；objX=0；} else { obj。风格。过渡='全部0.2s '；物体。风格。webkittransform=' translateX('-delWidth ' px)'；物体。风格。过渡=“全部0”；objX=-DelWidth；} }) //链式返回归还这个；};})(泽普托);touchWipe.html

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' meta name=' viewport ' id=' viewport ' content=' width=device-width，initial-scale=1'titlehtml5向左滑动删除特效/title style * { padd :0；margin:0list-style:无；}标题{ background: # f7483b边框-底部： 1px实心#ccc}标题H2 {文本对齐：中心；线高： 54pxfont-size : 16pxcolor: #fff} .list-ul{ overflow:隐藏}。list-Li {行高： 60px边框-底部： 1px实心# fcfcfc位置：相对；padding: 0 12pxcolor: # 666背景# f2f2-web套件-transform : translateX(0px)；} .btn{位置：绝对值；top : 0；右侧：-80px；文本对齐：中心；背景# ffcb20color: # fff宽度： 80px }/样式/流浆箱氘消息列表/H2/标题部分=' list ' ul class=' list-ul ' Li id=' Li ' class=' list-Li ' div class=' con '你的快递到了，请到楼下签收/div div class='btn '删除/div/Li Li=' list-Li ' div=' con '哇，你在干嘛，快点来啊就等你了/div div class='btn '删除/div/Li/ul/section px 3360 span id=' X '/span/ppobjx 3360 span id=' Objx '/span/PPI nitx 3360 span id=' IntX '/span/ppmovex 3360 span id=' moveX '/span/pscript type=' text/JavaScript ' src=' http 3360http://apps。bdimg。com/libs/zepto/1。1 .4/zepto .李').触摸擦除({ itemdelete : }).BTN ' })；});/脚本/正文/html效果：

实际项目中的应用效果：

消除病菌到上面一步，基本实现了我们所需要的功能。但是有几个问题：

1.右边的删除按钮点击失灵，因为跨度无法冒泡到大按钮上；

2.非常严重的问题，我们给差异添加了触摸移动事件同时用preventDefault()屏蔽了原始的浏览器事件，导致上下滑动差异的时候页面无法滚动了！

第一个问题比较容易解决，我们把跨度直接去掉，将"删除"写到钢性铸铁中的：以前里，像这样：项目擦除项目-在{内容： }之前删除：删除；color: # fff}对于第二个问题，网上说用的使用来解决。我们这里参考手机即时通信软件中对联系人的滑动操作。

大致原理：在滑动最开始的时候，判断是Y轴的移动多还是X轴的移动多。如果是X轴移动大，则判断为滑动删除操作，我们再使用preventDefault()；

以上就是本文的全部内容，希望对大家的学习有所帮助。