找回密码
当前位置：前端开发者 > JavaScript > 正文

移动端向左滑动删除

2018-10-20 分类：JavaScript 阅读(855) 评论(0)
前端公众号支付开发
前端可以开发公众号吗
web前端开发公众号

html 代码

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport” />
    <meta name=”format-detection” content=”telephone=no”>
    <meta name=”apple-mobile-web-app-capable” content=”yes”>
    <title>向左滑动删除</title>
    <meta name=”keywords” content=”” />
    <meta name=”description” content=”” />
    <link href=”css/uu.css” rel=”stylesheet” type=”text/css”>
    <script type=”text/javascript” src=’http://libs.baidu.com/jquery/2.0.0/jquery.js’></script>
    <style>
        .main01 {
            width: 100%;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
        }
        .main01 ul li {
            position: relative;
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            border-bottom: 1px solid #efefef;
            font-size: 1.3rem;
            -webkit-transform: translateX(0px);
        }
        .txt {
            padding-left: 1rem;
            width: 100%;
            box-sizing: border-box;
        }
        .del {
            position: absolute;
            top: 0;
            right: -4rem;
            width: 4rem;
            line-height: 3rem;
            height: 3rem;
            background: #F00;
            color: #FFF;
            text-align: center;
        }
        #more {
            text-align: center;
            line-height: 3rem;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        #more a {
            width: 5rem;
            height: 3rem;
            line-height: 3rem;
            color: #FFF;
            background: #0C6;
            text-align: center;
            font-size: 1.3rem;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class=”main01″ id=”hdlist”>
        <ul>
            <li class=”list-li”>
                <div class=”txt”>向左滑动删除</div>
                <div class=”del”>删除</div>
            </li>
            <li class=”list-li”>
                <div class=”txt”>向左滑动删除</div>
                <div class=”del”>删除</div>
            </li>
            <li class=”list-li”>
                <div class=”txt”>向左滑动删除</div>
                <div class=”del”>删除</div>
            </li>
            <li class=”list-li” style=”display:none”>
                <div class=”txt”>向左滑动删除</div>
                <div class=”del”>删除</div>
            </li>
            <li style=”display:none”>
                <div class=”txt”>向左滑动删除</div>
                <div class=”del”>删除</div>
            </li>
        </ul>
    </div>
</body>
<script>
    window.addEventListener(‘load’, function () {
        var initX; //触摸位置
        var moveX; //滑动时的位置
        var X = 0; //移动距离
        var objX = 0; //目标对象位置
        document.getElementById(“hdlist”).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) {
                document.getElementById(“hdlist”).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 > 50) {
                                l = 50;
                                obj.style.WebkitTransform = “translateX(” + -l + “px)”;
                            }
                        }
                    }
                });
            } else if (objX < 0) {
                document.getElementById(“hdlist”).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 = -50 + 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(” + -50 + “px)”;
                        }
                    }
                });
            }
        })
        document.getElementById(“hdlist”).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 > -50) {
                    obj.style.WebkitTransform = “translateX(” + 0 + “px)”;
                    objX = 0;
                } else {
                    obj.style.WebkitTransform = “translateX(” + -50 + “px)”;
                    objX = -50;
                }
            }
        })
    })
</script>
</html>
前端开发相关的公众号
公众号前端开发
前端公众号开发 前端部署
赞(0)
前端开发者 » 移动端向左滑动删除
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论