<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <style> *{ margin:0; padding: 0; } .wrapper{ overflow:hidden; } .swipArea{ height: 100px; background-color: green; text-align: center; line-height: 100px; position: absolute; left: 0; right: 0; } </style></head><body> <div> <div id="swipArea">swipArea</div> </div> <script> function Swip(el){ this.el = el; this.init(); } Swip.prototype.init = function(){ var startTouchX = 0, startTouchY = 0, endTouchX = 0, endTouchY = 0; var deltaX = 0, deltaY = 0; var direction = "left"; var d = ""; var that = this; this.el.addEventListener("touchstart",function(evt){ evt.preventDefault(); var touches = evt.touches[0]; startTouchX = touches.pageX; startTouchY = touches.pageY; // console.log("startTouchX : " + startTouchX) },false); document.addEventListener("touchmove",function(evt){ evt.preventDefault(); var touches = evt.touches[0]; endTouchX = touches.pageX; endTouchY = touches.pageY; deltaY = endTouchY - startTouchY; if(deltaY > 0) that.el.style.top = deltaY + "px"; // console.log("endTouchX : " + endTouchX + ",endTouchY : " + endTouchY) },false); document.addEventListener("touchend",function(evt){ evt.preventDefault(); document.ontouchmove = null; document.ontouchstart = null; deltaX = endTouchX - startTouchX; deltaY = endTouchY - startTouchY; d = Math.abs(deltaX) > Math.abs(deltaY) ? "h" : "v"; if(d == "h") direction = deltaX > 0 ? "right" : "left"; else if(d == "v") direction = deltaY > 0 ? "down" : "top"; that.el.style.top = "0"; // console.log("deltaX : " + deltaX + ",deltaY : " + deltaY) ; },false); } var swipArea = document.querySelector("#swipArea"); new Swip(swipArea); </script></body></html>
添加回答
举报
0/150
提交
取消