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
最新文章
日记3
指针、指针的指针、指针的传递、流程图思维导图
树的同构
集合运算、并查集、按秩归并、路径压缩
动态规划算法
爬虫学习笔记第三天(requests库)
爬虫学习笔记第二天(urllib库)
爬虫学习笔记第一天
Oracle数据库分组排序
mysql修改密码
热门文章
JUnit单元测试代码
POI大数据Excel生成
Java发送邮件功能
Python数据分析与挖掘常用模块
Python四线程爬取西刺代理
Python返回多个值
概率dp+状压dp C. LRU 暑训第五天
区间dp [D
参加创新比赛的感想
android即时通信开源项目信息
Copyright © 2011-2022 走看看