会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
犹记惊鸿照影(JS)
博客园
首页
新随笔
联系
订阅
管理
滑动删除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{width:100%;} .del{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 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
删除
posted @
2017-01-10 23:53
莺哥
阅读(
147
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告