浪去项目有个头图滑动横向滑动的需求,故写次demo
<!DOCTYPE html> <html> <head> <title>滑动跟随手指横向滑动</title> <style type="text/css"> .spirit { /* 方块的class名称*/ position: absolute; width: 50px; height: 50px; background-color: red; } </style> </head> <body style="height: 100%;margin:0;padding:0"> <div id="canvas" style="position: relative;width:100%;height:580px;"></div> <!-- <script type="text/javascript" src="jquery-1.11.2.min.js"></script> --> <script type="text/javascript"> // define global variable var canvas = document.getElementById("canvas"), spirit, startX, startY; // touch start listener function touchStart(event) { event.preventDefault(); if (spirit ||! event.touches.length) return; var touch = event.touches[0]; startX = touch.pageX; startY = touch.pageY; spirit = document.createElement("div"); spirit.className = "spirit"; spirit.style.left = startX + "px"; spirit.style.top = startY + "px"; //console.log(startX); canvas.appendChild(spirit); } canvas.addEventListener("touchstart", touchStart, false); function touchMove(event) { //alert("a"); event.preventDefault(); if (!spirit || !event.touches.length) return; var touch = event.touches[0], x = touch.pageX - startX, //y = touch.pageY - startY; spirit.style.webkitTransform = 'translate3d(' + x + 'px,'+'0px,0px)'; } canvas.addEventListener("touchmove", touchMove, false); function touchEnd(event) { if (!spirit) return; //canvas.removeChild(spirit); spirit = null; } canvas.addEventListener("touchend", touchEnd, false); </script> </body> </html>
时间: 2024-11-10 08:59:03