移动端左滑菜单组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>滑动菜单组件</title>
    <script>
        var dpr = 1 / window.devicePixelRatio;
        var docEl = document.documentElement;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+dpr+',minimum-scale='+dpr+',maximum-scale='+dpr+'" />')
        var fz = docEl.clientWidth / 10;
        docEl.style.fontSize = fz + 'px';
    </script>
    <style>
        html,div,body,ul,li,a,span,p,h2{
            margin:0;
            padding:0;
        }
        body{
            background-color: #eee;
        }
        ul li{
            list-style: none;
        }
        .list-ul {
          overflow: hidden;
          margin-top: 0.3rem;
        }
        a{
            text-decoration: none;
        }
        .list-li {
          min-height: 1.75rem;
          padding: 0 .4rem 0 .1rem;
          color: #61615e;
          background: #fff;
          -webkit-transform: translateX(0rem);
          -webkit-transition: -webkit-transform .1s 0s linear;
                  transition: transform .1s 0s linear;
          will-change: transform;
          position: relative;
          margin-bottom: 0.3rem;
          border-width: 2px;
        }
        .con {
          height: 100%;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
        }
       
        .address-info {
          font-size: 0.32rem;
          line-height: 0.5rem;
          padding-top: .8em;
          width: 100%;
        }

        .address-info h2 {
          color: #62625f;
        }
        .address-info p {
          color: #a4a4a4;
          font-size: 0.3rem;
        }

        .null-address {
          padding-top: .8em;
        }
        .list-li .btn {
          position: absolute;
          top: 0;
          right: -2.3rem;
          height: 100%;
          text-align: center;
          background: #fe5b1e;
          color: #fff;
          width: 2.3rem;
          line-height: 1.75rem;
          font-size: 0.32rem;
        }

    </style>
</head>
<body>
    <section class="control-address-list">
        <ul class="list-ul">
            <a href="#">
                <li class="list-li">
                    <div class="con">
                        <div class="address-info">
                            <h2>收货人:张三,159 7777 8888</h2>
                            <p>收货地址:XXX省 XXX市 XXX区</p>
                        </div>
                        <span class="icon-font icon-arrows-right"></span>
                    </div>
                    <div class="btn">删除</div>
                </li>
            </a>
            <a href="#">
                <li class="list-li">
                    <div class="con">
                        <div class="address-info">
                            <h2>收货人:张三,159 7777 8888</h2>
                            <p>收货地址:XXX省 XXX市 XXX区 XXX楼24楼技术部</p>

                        </div>
                        <span class="icon-font icon-arrows-right"></span>
                    </div>
                    <div class="btn">删除</div>
                </li>
            </a>
            <a href="#">
                <li class="list-li">
                    <div class="con">

                        <div class="address-info">
                            <h2>收货人:张三,159 7777 8888</h2>
                            <p>收货地址:XXX省 XXX市 XXX区 XXX楼24楼技术部</p>
                        </div>
                    </div>
                    <div class="btn J_del">删除</div>
                </li>
            </a>
        </ul>
    </section>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        !function(){
            var initX;
            var moveX;
            var X = 0;
            var objX = 0;
            var btnWidth = $('.btn').width();//删除按钮宽度

            window.addEventListener('touchstart',function(event){
                // event.preventDefault();
                var obj = event.target.parentNode;
                if(obj.className == "address-info" && obj.className != 'list-li'){
                    $('.list-li').css('-webkit-transform',"translateX(" + 0 + "px)");
                    initX = event.targetTouches[0].pageX;
                    objX =(obj.parentNode.parentNode.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
                }else if(obj.parentNode == null){
                    $('.list-li').css('-webkit-transform',"translateX(" + 0 + "px)");
                }
                if( objX == 0){
                    window.addEventListener('touchmove',function(event) {
                        event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "address-info") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;
                            if (X > 0) {
                                obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + 0 + "px)";
                            }
                            else if (X < 0) {
                                var l = Math.abs(X);
                                obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + -l + "px)";
                                if(l>btnWidth){
                                    l=btnWidth;
                                    obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + -l + "px)";
                                }
                            }
                        }
                    });
                }
                else if(objX<0){
                    window.addEventListener('touchmove',function(event) {
                        // event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "address-info") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;
                            if (X > 0) {
                                var r = -btnWidth + Math.abs(X);
                                obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + r + "px)";
                                if(r>0){
                                    r=0;
                                    obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + r + "px)";
                                }
                            }
                            else {     //向左滑动
                                obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + -btnWidth + "px)";
                            }
                        }
                    });
                }

            })
            window.addEventListener('touchend',function(event){
                // event.preventDefault();
                var obj = event.target.parentNode;
                if(obj.className == "address-info"){
                    objX =(obj.parentNode.parentNode.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
                    if(objX>-(btnWidth/2)){
                        obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + 0 + "px)";
                    }else{
                        obj.parentNode.parentNode.style.WebkitTransform = "translateX(" + -btnWidth + "px)";
                    }
                }
             })
        }()
    </script>

</body>
</html>

以上代码参考自站长素材:html5苹果手机向左滑动删除特效
查看demo:移动端左滑菜单组件
源码下载:移动端左滑菜单组件

发表评论

电子邮件地址不会被公开。 必填项已用*标注