向左滑動刪除一區域內容(移動端)


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

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM