首页 > 代码库 > 滑动删除实现
滑动删除实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"> <title>TOUCH</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ -webkit-user-select: none; } body, button{ font-family:‘Microsoft YaHei‘, arial, helvetica, sans-serif; } .wrap{ position: relative; height: 60px; border-bottom: 1px solid #ccc; } .container{ position: relative; z-index: 2; width: 100%; height: 60px; display: -webkit-box; background-color: #FFF; } .trans{ -webkit-transition: margin-left 0.2s linear; transition: margin-left 0.2s linear; } .head-img{ width: 40px; height: 40px; line-height: 40px; background-color: #99F; border-radius: 3px; margin: 10px 0 0 10px; text-align: center; font-size: 12px; color: #FFF; } .content{ margin: 10px 0 0 5px; -webkit-box-flex: 1; } .content p{ font-size: 12px; color: #999; margin-top: 5px; } .del-btn{ position: absolute; right: 0; top: 0; z-index: 1; width: 60px; height: 60px; line-height: 60px; background-color: #F00; color: #FFF; border: 0; font-size: 14px; } </style> </head> <body> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <div class="wrap"> <div class="container"> <p class="head-img">图片</p> <div class="content"> <h5>腾讯新闻</h5> <p>云南鲁甸强震已致379人遇难</p> </div> </div> <button class="del-btn">删除</button> </div> <script type="text/javascript"> var startPos = 0, endPos = 0, parent = null; document.body.addEventListener(‘click‘, function(e) { e.stopPropagation(); e.preventDefault(); var target = e.target; if(target.className.indexOf(‘del-btn‘) > -1) { alert(‘点击了删除‘); } }, false); document.body.addEventListener(‘touchstart‘, function(e) { parent = e.target; while(parent && parent.className.indexOf(‘container‘) < 0) { parent = parent.parentNode; } var touch = e.touches[0]; startPos = touch.pageX; parent.className = ‘container‘; }, false); document.body.addEventListener(‘touchmove‘, function(e) { var touch = e.touches[0], offset = 0; if(parent.className != ‘container‘) { return; } endPos = touch.pageX; offset = endPos - startPos; if(offset > 0) { offset = 0; if(parent.className.length > 0) { parent.className = parent.className + ‘ trans‘; } else { parent.className = ‘trans‘; } } else if(Math.abs(offset) > 60) { offset = -60; } parent.style.marginLeft = offset + ‘px‘; }, false); document.body.addEventListener(‘touchend‘, function(e) { var offset = 0; if(parent.className != ‘container‘) { return; } offset = endPos - startPos; if(offset < 0 && Math.abs(offset) > 30) { offset = -60; } else { offset = 0; } if(parent.className.length > 0) { parent.className = parent.className + ‘ trans‘; } else { parent.className = ‘trans‘; } parent.style.marginLeft = offset + ‘px‘; }, false); </script> </body> </html>
本文出自 “我就是标准” 博客,请务必保留此出处http://liumanwei.blog.51cto.com/3005291/1535867
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。