左滑菜单（删除、置顶）

最新推荐文章于 2020-03-14 20:31:46 发布

weixin_30902675

最新推荐文章于 2020-03-14 20:31:46 发布

阅读量111

点赞数

文章标签：区块链

原文链接：http://www.cnblogs.com/wubaba/p/6844523.html

版权

<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;
                    // 清空上一个左滑的对象
                }
            }
        });
    }