<!doctype html> <html> <head> <meta charset="utf-8"> <title>左划出现删除按钮，右滑隐藏</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { // 设定每一行的宽度=屏幕宽度+按钮宽度 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width()); // 设定常规信息区域宽度=屏幕宽度 $(".line-normal-wrapper").width($(".line-wrapper").width()); // 设定文字部分宽度（为了实现文字过长时在末尾显示...） $(".line-normal-msg").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; // 清空上一个左滑的对象 } } }); } }); </script> <script> window.onload = function() { $(".line-btn-delete button").click(function() { $(this).parent().parent().parent().remove(); }); }; </script> <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; } .line-btn-delete { float: left; width: 132px; height: 144px; } .line-btn-delete button { width: 100%; height: 100%; background: #00bc12; border: none; font-size: 24px; color: #fff; } .line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; } .line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; } .line-normal-icon-wrapper img { width: 120px; } .line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; } .line-normal-avatar-wrapper img { width: 92px; height: 92px; } .line-normal-left-wrapper { float: left; overflow: hidden; } .line-normal-info-wrapper { float: left; margin-left: 10px; } .line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; } .line-normal-msg { height: 28px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; color: #4e4e4e; margin-top: 11px; } .line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; } </style> </head> <body> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" /> </div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name"> 笨蛋哆啦A梦快点 </div> <div class="line-normal-msg"> 在不快点我就不等你了哦 </div> <div class="line-normal-time"> 1分钟前 </div> </div> </div> <div class="line-normal-icon-wrapper"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" /> </div> </div> <div class="line-btn-delete"> <button>删除</button> </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" /> </div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name"> 笨蛋哆啦A梦快点 </div> <div class="line-normal-msg"> 在不快点我就不等你了哦 </div> <div class="line-normal-time"> 1分钟前 </div> </div> </div> <div class="line-normal-icon-wrapper"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" /> </div> </div> <div class="line-btn-delete"> <button>删除</button> </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" /> </div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name"> 笨蛋哆啦A梦快点 </div> <div class="line-normal-msg"> 在不快点我就不等你了哦 </div> <div class="line-normal-time"> 1分钟前 </div> </div> </div> <div class="line-normal-icon-wrapper"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" /> </div> </div> <div class="line-btn-delete"> <button>删除</button> </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" /> </div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name"> 笨蛋哆啦A梦快点 </div> <div class="line-normal-msg"> 在不快点我就不等你了哦 </div> <div class="line-normal-time"> 1分钟前 </div> </div> </div> <div class="line-normal-icon-wrapper"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" /> </div> </div> <div class="line-btn-delete"> <button>删除</button> </div> </div> </div> </body> </html>
