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