左劃出現刪除按鈕，右滑隱藏
阿新 • • 發佈：2018-11-08
<!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>
