向左滑动删除一区域内容（移动端）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>左划出现删除按钮，右滑隐藏</title> <style type="text/css"> * { margin: 0; padding: 0; } .line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; } .line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; } .btn_del { float: left; width: 132px; height: 144px; } .btn_del button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; } .line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; } .right_img { float: right; width: 120px; height: 120px; margin-right: 12px; } .right_img img { width: 120px; height: 120px; } .left_img { width: 100px; height: 124px; float: left; margin-left: 12px; } .left_img img { width: 92px; height: 92px; border-radius: 60px;margin-top: 16px } .left_content { float: left; overflow: hidden; } .con_text { float: left; margin-left: 10px; } .con_text1 { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; } .con_text2 { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; } .con_text3 { height: 28px; line-height: 28px; color: #999; margin-top: 11px; } </style> </head> <body> <div class="line-wrapper" id="1"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="left_content"> <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /></div> <div class="con_text"> <div class="con_text1">蜡笔小新</div> <div class="con_text2">在同行的小伙伴中提到了你</div> <div class="con_text3">1分钟前</div> </div> </div> <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg"/></div> </div> <div class="btn_del" id="btn1"><button>删除</button></div> </div> </div> <div class="line-wrapper" id="2"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="left_content"> <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg" /></div> <div class="con_text"> <div class="con_text1">乔巴</div> <div class="con_text2">你看不到我哦</div> <div class="con_text3">1分钟前</div> </div> </div> <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_4.png"/></div> </div> <div class="btn_del" id="btn2"><button>删除</button></div> </div> </div> <div class="line-wrapper" id="3"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="left_content"> <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_5.jpg" /></div> <div class="con_text"> <div class="con_text1">渐行渐远</div> <div class="con_text2">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div> <div class="con_text3">1分钟前</div> </div> </div> <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg"/></div> </div> <div class="btn_del" id="btn3"><button>删除</button></div> </div> </div> <div class="line-wrapper" id="4"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="left_content"> <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_7.jpg" /></div> <div class="con_text"> <div class="con_text1">小黄人</div> <div class="con_text2">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div> <div class="con_text3">1分钟前</div> </div> </div> <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_8.jpg"/></div> </div> <div class="btn_del" id="btn4"><button>删除</button></div> </div> </div> </body> </html> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { // 设定每一行的宽度=屏幕宽度+按钮宽度 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".btn_del").width()); // 设定常规信息区域宽度=屏幕宽度 $(".line-normal-wrapper").width($(".line-wrapper").width()); // 设定文字部分宽度（为了实现文字过长时在末尾显示...） $(".con_text2").width($(".line-normal-wrapper").width() - 280); // 获取所有行，对每一行设置监听 var lines = $(".line-normal-wrapper"); var len = lines.length; var lastX, lastXForMobile; // 用于记录被按下的对象 var pressedObj; // 当前左滑的对象 var lastLeftObj; // 上一个左滑的对象 // 用于记录按下的点 var start; // 网页在移动端运行时的监听 for (var i = 0; i < len; ++i) { lines[i].addEventListener('touchstart', function(e){ lastXForMobile = e.changedTouches[0].pageX; pressedObj = this; // 记录被按下的对象 // 记录开始按下时的点 var touches = event.touches[0]; start = { x: touches.pageX, // 横坐标 y: touches.pageY // 纵坐标 }; }); lines[i].addEventListener('touchmove',function(e){ // 计算划动过程中x和y的变化量 var touches = event.touches[0]; delta = { x: touches.pageX - start.x, y: touches.pageY - start.y }; // 横向位移大于纵向位移，阻止纵向滚动 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); } }); lines[i].addEventListener('touchend', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } var diffX = e.changedTouches[0].pageX - lastXForMobile; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } } }); } // 网页在PC浏览器中运行时的监听 for (var i = 0; i < len; ++i) { $(lines[i]).bind('mousedown', function(e){ lastX = e.clientX; pressedObj = this; // 记录被按下的对象 }); $(lines[i]).bind('mouseup', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } var diffX = e.clientX - lastX; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 } } }); } }); $(document).ready(function(){ $("#btn1").click(function(){ $("#1").remove(); }); $("#btn2").click(function(){ $("#2").remove(); }); $("#btn3").click(function(){ $("#3").remove(); }); $("#btn4").click(function(){ $("#4").remove(); }); }); </script>
备用可研究代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>html5向左滑动删除特效</title> <style> * { padding: 0; margin: 0; list-style: none; } header { background: #f7483b; border-bottom: 1px solid #ccc } header h2 { text-align: center; line-height: 54px; font-size: 16px; color: #fff } .list-ul { overflow: hidden } .list-li { line-height: 60px; border-bottom: 1px solid #fcfcfc; position: relative; padding: 0 12px; color: #666; background: #f2f2f2; -webkit-transform: translateX(0px); } .btn { position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px } </style> <script> /* * 描述：html5苹果手机向左滑动删除特效 */ window.addEventListener('load', function() { var initX; //触摸位置 var moveX; //滑动时的位置 var X = 0; //移动距离 var objX = 0; //目标对象位置 window.addEventListener('touchstart', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { initX = event.targetTouches[0].pageX; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; } if (objX == 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; } else if (X < 0) { var l = Math.abs(X); obj.style.WebkitTransform = "translateX(" + -l + "px)"; if (l > 80) { l = 80; obj.style.WebkitTransform = "translateX(" + -l + "px)"; } } } }); } else if (objX < 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { var r = -80 + Math.abs(X); obj.style.WebkitTransform = "translateX(" + r + "px)"; if (r > 0) { r = 0; obj.style.WebkitTransform = "translateX(" + r + "px)"; } } else { //向左滑动 obj.style.WebkitTransform = "translateX(" + -80 + "px)"; } } }); } }) window.addEventListener('touchend', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; if (objX > -40) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; objX = 0; } else { obj.style.WebkitTransform = "translateX(" + -80 + "px)"; objX = -80; } } }) }) </script> </head> <body> <header> <h2>消息列表</h2> </header> <section class="list"> <ul class="list-ul"> <li id="li" class="list-li"> <div class="con"> 测试内容第一条 </div> <div class="btn">删除</div> </li> <li class="list-li"> <div class="con"> 测试内容第二条 </div> <div class="btn">删除</div> </li> </ul> </section> </body> </html>
