浪去项目有个头图滑动横向滑动的需求，故写次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>
扫一扫
2094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
