左滑菜單(刪除、置頂)
阿新 • • 發佈:2017-05-12
gin 所有 nbsp func stl lis mod cli img
<div class="xinzhibox"> <div class="list"> <div class="xinzhilist" tapmode onclick="openlist(‘數字化商業‘)"> <div class="imgbox"> <img src="../image/news/img.png" alt="" /> <div class="dian red"></div> </div> <div class="xinzhilistright"> <p>數字化商業</p> <span>CIGI:央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國</span> </div> <div class="zhiding"></div> </div> <div class="right"> <div tapmode class="top_btn">取消置頂</div> <div tapmode class="del_btn">取消訂閱</div> </div> </div> <div class="list"> <div class="xinzhilist" tapmode onclick="openlist(‘數字化商業‘)"> <div class="imgbox"> <img src="../image/news/img.png" alt="" /> <div class="dian red"></div> </div> <div class="xinzhilistright"> <p>數字化商業</p> <span>CIGI:央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國</span> </div> <div class="zhiding"></div> </div> <div class="right"> <div tapmode class="top_btn">取消置頂</div> <div tapmode class="del_btn">取消訂閱</div> </div> </div> <div class="list"> <div class="xinzhilist" tapmode onclick="openlist(‘數字化商業‘)"> <div class="imgbox"> <img src="../image/news/img.png" alt="" /> <div class="dian red"></div> </div> <div class="xinzhilistright"> <p>數字化商業</p> <span>CIGI:央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國,央行區塊鏈聯盟是G20國</span> </div> </div> <div class="right"> <div tapmode class="top_btn">置頂</div> <div tapmode class="del_btn">取消訂閱</div> </div> </div>--> </div>
html
function addListenFn() { /*左滑移除*/ //設置要滑動的距離 var slideWidth; // 獲取所有行,對每一行設置監聽 var lines = $(".xinzhilist"); var linesParent = $(".list"); var len = lines.length; var lastXForMobile; // 用於記錄被按下的對象 var pressedObj; // 當前左滑的對象 var lastLeftObj; // 上一個左滑的對象 // 用於記錄按下的點 var start; // 監聽 linesParent.delegate(".xinzhilist", "touchstart", function(e) { lastXForMobile = event.changedTouches[0].pageX; pressedObj = this; slideWidth = $(pressedObj).parent().find(‘.right‘).width(); // 記錄被按下的對象 // 記錄開始按下時的點 var touches = event.touches[0]; start = { x : touches.pageX, // 橫坐標 y : touches.pageY // 縱坐標 }; }); linesParent.delegate(".xinzhilist", "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(); } }); linesParent.delegate(".xinzhilist", "touchend", function(e) { if (lastLeftObj && pressedObj != lastLeftObj) {// 點擊除當前左滑對象之外的任意其他位置 $(lastLeftObj).animate({ marginLeft : 0 }, 300); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } var diffX = event.changedTouches[0].pageX - lastXForMobile; if (diffX < -60) { $(pressedObj).animate({ marginLeft : -slideWidth + "px" }, 300); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({ marginLeft : 0 }, 300); // 已經左滑狀態的按鈕右滑 lastLeftObj = pressedObj; // 記錄上一個左滑的對象 } else if (diffX > 60) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({ marginLeft : 0 }, 300); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } } }); }
js
左滑菜單(刪除、置頂)