滑动删除demo

首页 > 代码库 > 滑动删除demo

2024-08-31 14:31:22 212人阅读

<!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>

滑动删除demo

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 滑动删除demo

滑动删除demo

看完仍有疑问？有类似问题直接问程序猿