滑动删除demo - 走看看

zoukankan html css js c++ java

滑动删除demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script><title></title> <style> *{margin:0;padding:0;} ul {overflow: hidden;} ul li{list-style-type: none;} li{ position:relative; line-height:30px; border-bottom:1px solid #ddd; background-color:#ccc; } .con{100%;} .del{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; 80px; } </style> </head> <body > <ul> <li class="list"> <div class="con">1111111111111</div> <div class="del">删除</div> </li> <li class="list"> <div class="con">222222222222</div> <div class="del">删除</div> </li> <li class="list"> <div class="con">33333333</div> <div class="del">删除</div> </li> </ul> <script> window.onload=function(){ var Init= 0,Endnit,objX; var jiange; window.addEventListener('touchstart',function(e){ e.preventDefault(); var obj = e.target.parentNode; if(obj.className=="list"){ Init= e.targetTouches[0].pageX; objX=(obj.style.WebkitTransform.replace(/translateX(/,'').replace(/px)/,''))*1; } if(objX==0){ window.addEventListener('touchmove',function(e){ e.preventDefault(); var obj = e.target.parentNode; if(obj.className=="list"){ Endnit=e.targetTouches[0].pageX; jiange=Endnit-Init; if(jiange<0&&jiange>-80) { obj.style.WebkitTransform='translateX('+jiange+'px)'; }else if(jiange<-80){ obj.style.WebkitTransform='translateX(-80px)'; } } }) }else{ window.addEventListener('touchmove',function(e){ e.preventDefault(); var obj = e.target.parentNode; if(obj.className=="list"){ Endnit=e.targetTouches[0].pageX; jiange=Endnit-Init; console.log(objX+jiange) if(80-jiange>0) { obj.style.WebkitTransform='translateX('+(-(80-jiange))+'px)'; }else if(jiange>80){ obj.style.WebkitTransform='translateX(0px)'; } } }) } window.addEventListener('touchend',function(e){ e.preventDefault(); var obj = e.target.parentNode; objX=(obj.style.WebkitTransform.replace(/translateX(/,'').replace(/px)/,''))*1; if(objX>-40){ obj.style.WebkitTransform='translateX(0px)'; }else{ obj.style.WebkitTransform='translateX(-80px)'; } }) }) } </script> </body> </html>
```
    
        1111111111111
        删除
    
    
        222222222222
        删除
    
    
        33333333
        删除
    
```
查看全文

相关阅读:
实习第一天
 使用epublib解析epub文件（章节内容、书籍菜单）
jdk1.8以前不建议使用其自带的Base64来加解密
 java学习-AES加解密之AES-128-CBC算法
 java学习-sha1散列算法
 日、周、月活跃用户数，用户流失率
 java学习-java.lang.Math随机数生成
 AndroidStudio报错Software caused connection abort: recv failed
java学习-java.lang一Number类
 jdk内置类javax.imageio.ImageIO支持的图片处理格式

原文地址：https://www.cnblogs.com/heyinwangchuan/p/6271352.html