1. 程式人生 > >左滑菜單(刪除、置頂)

左滑菜單(刪除、置頂)

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

左滑菜單(刪除、置頂)