<!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>
簡單的移动端菜单栏滑屏demo
最新推荐文章于 2018-09-15 11:21:30 发布