碼上歡樂
相關內容    簡體    繁體

jquery左划出現刪除按鈕，右滑隱藏

本文轉載自   查看原文   2017-10-16 14:25   1366    jquery

jquery左側划出顯示刪除按鈕，右滑動隱藏刪除按鈕

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>左划出現刪除按鈕，右滑隱藏</title>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            function init() {

                // 設定每一行的寬度=屏幕寬度+按鈕寬度
                $(".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; // 清空上一個左滑的對象
                            }
                        }
                    });
                }
            }

            $(function() {
                init();
                var pageNum = 1;

                function GetListPageFun() { //請求獲取數據
                    var html = [];
                    for(var i = 0; i < 15; i++) {
                        html[i] = '<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="http://www.baidu.com/img/bd_logo1.png" /></div><div class="line-normal-info-wrapper">    <div class="line-normal-user-name">蠟筆小新</div><div class="line-normal-msg">在同行的小伙伴中提到了你</div><div class="line-normal-time">1分鍾前</div></div></div><div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div></div><div class="line-btn-delete"><button>刪除</button></div></div></div>';
                    }
                    $("#data").append(html.join(""))
                }
                $(window).scroll(function() { //分頁
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 30) { //滾動到底部時
                        pageNum += 1;
                        GetListPageFun();
                        init();
                    }
                });

            });
        </script>

        <script type="text/javascript">
        </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: 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;
            }
            
            .line-normal-icon-wrapper {
                float: right;
                width: 120px;
                height: 120px;
                margin-right: 12px;
            }
            
            .line-normal-icon-wrapper img {
                width: 120px;
                height: 120px;
            }
            
            .line-normal-avatar-wrapper {
                width: 100px;
                height: 124px;
                float: left;
                margin-left: 12px;
            }
            
            .line-normal-avatar-wrapper img {
                width: 92px;
                height: 92px;
                border-radius: 60px;
            }
            
            .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;
            }
            
            
            
            .position {
                display: none;
                width: 80%;
                padding: 0 5% 5% 5%;
                margin: 5%;
            }
            .provincebox {
                width: 25%;
                float: left;
                box-sizing: border-box;
                padding: 10px 4px;
                text-align: center;
            }
            .city_container {
                border: 1px solid #ddd;
                padding: 5px;
                box-sizing: border-box;
                border-radius: 3px;
                font-size: 12px;
                color:#333;
            }
            
            
        </style>
    </head>

    <body id="data">
        <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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">喬巴</div>
                            <div class="line-normal-msg">你看不到我哦</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">賤行賤遠</div>
                            <div class="line-normal-msg">回憶里想起模糊的小時候，雲朵漂浮在藍藍的天空，那時的你說，要和我手牽手，一起走到時間的盡頭</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">小黃人</div>
                            <div class="line-normal-msg">哈哈哈哈哈……暑假來看小黃人電影哦~哈哈哈……</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></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="http://www.baidu.com/img/bd_logo1.png" /></div>
                        <div class="line-normal-info-wrapper">
                            <div class="line-normal-user-name">蠟筆小新</div>
                            <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                            <div class="line-normal-time">1分鍾前</div>
                        </div>
                    </div>
                    <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
                </div>
                <div class="line-btn-delete"><button>刪除</button></div>
            </div>
        </div>

    </body>

</html>

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 左右滑動事件，左划出現刪除按鈕，右滑隱藏 MUI——MUI左滑刪除、MUI右滑刪除、MUI左\右滑刪除 【前端】jQuery移動端左滑刪除 Vue移動端左滑右滑 Android滑動列表(拖拽，左滑刪除，右滑完成)功能實現（1） Android滑動列表(拖拽，左滑刪除，右滑完成)功能實現（2） UITableView設置Cell左滑多個按鈕（編輯，刪除，置頂等） Android ListView實現仿iPhone實現左滑刪除按鈕 JS實現左滑出現刪除按鈕 swiper監聽左滑還是右滑動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM