滑动删除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
        删除
    
```
查看全文

相关阅读:
无刷新分页实现
 .Net QQ互联教程
 解决 Files 的值"<<<<<<< HEAD"无效。路径中具有非法字符
 mvc 路由伪静态实现
 C# 获取外网IP地址
 mvc开发网站打开慢总结
 如何轻松实现个性化推荐系统
 js 颜色选择插件
 MVC+EF 多条件查询
 前端编写手机兼容页面（简易方式）

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