手机前端-滑动删除（抄的）

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        header {
            background: #ffcb20;
            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: #f7483b;
            color: #fff;
            width: 80px;
        }
    </style>
    <script>
        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 < -50)
                            //{
                            //这里代码意思为：当滑动当前列，去除其他列的删除按钮
                            //    $(".list-li").css("-webkit-transform", "translateX(0)");
                            //}
                            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) {
                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)";
                    } else {
                        obj.style.WebkitTransform = "translateX(" + -80 + "px)";
                    }
                }
            })

        });
        $(function () {
            $(".btn").each(function () {
                $(this).on("click", function () {
                    alert($(this).attr("id"));
                })
            })
            $.get("http://10.100.22.54:8095/api/NewsManager/GetNews", function (data) {
                var $ul = $(".list-ul"); $ul.empty();
                $.each(data, function (key,value) {
                    $ul.append('<li class="list-li"><div class="con">'
                        + value.Title
                        + '<div class="btn" data-id='+value.ID+'>删除</div>'
                        +'</li></div>');
                })
            },"json")
        })

    </script>
</head>
<body>
    <header>
        <h2>消息列表</h2>
    </header>
    <section class="list">
        <ul class="list-ul">
            <li class="list-li">
                <div class="con">
                    英国退欧了，是好事还是坏事
                </div>
                <div class="btn" id="1234">删除</div>
            </li>
            <li class="list-li">
                <div class="con">
                    哇，朝鲜打算收复欧盟
                </div>
                <div class="btn" id="1235">删除</div>
            </li>
            <li class="list-li">
                <div class="con">
                    重大消息，A股将站稳3000点
                </div>
                <div class="btn" id="1235">删除</div>
            </li>
        </ul>
    </section>
</body>
</html>
posted @ 2016-07-11 10:43 wjl910 阅读(102) 评论(0) 收藏举报
刷新页面返回顶部
wjl910

手机前端-滑动删除（抄的）

公告
