簡單的移动端菜单栏滑屏demo

来源：互联网发布：谷嫂淘宝同款破解版编辑：程序博客网时间：2024/05/17 20:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1">    <style>        *{            padding: 0;            margin: 0;        }        html,body{            width: 100%;            height: 100%;            font-size: 14px;        }        .box{            width: 100%;            height: 100%;            background-color: red;        }        .shaow{            width: 80%;            height: 100%;            background-color: rgba(0,0,0,0.2);            position: absolute;            top: 0;            left: -100%;            transition:all 0.5s linear;        }        .left{            left:0;        }    </style></head><body>    <div class="box">            <button>点击</button>    </div>    <div class="shaow"></div>    <script>        var btn=document.querySelector("button");        var shaow=document.querySelector(".shaow");        btn.onclick=function () {            shaow.classList.add("left");        }//        移动端touch事件        var startX=0,moveX=0,distanceX;        shaow.addEventListener("touchstart",function (e) {            startX=e.touches[0].clientX;        })        shaow.addEventListener("touchmove",function (e) {            moveX=e.touches[0].clientX;        })        shaow.addEventListener("touchend",function (e) {            distanceX=moveX-startX            if(distanceX<0){                shaow.classList.remove("left");            }            startX=0;moveX=0;distanceX=0;        })    </script></body></html>
阅读全文
0 0