移动轨迹回放

这两天的作业压死个人，就没空写东西了，先贴一个刚新鲜出炉还热乎的代码~

主要功能是：在页面中按下并移动鼠标，释放时，小人会按照鼠标移动轨迹运动

核心主要是按下鼠标事件 onmousedown , 鼠标滑动事件 onmousemove , 鼠标松开后 onmouseup;

除此之外很重要的一点是需要记录鼠标的坐标，以便小飞人可以按照记录的轨迹回放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<input type="button" value="根据移动轨迹移动" />
		<p>点击按钮激活功能</p>
		<img src="img/1.gif"/>
		<script type="text/javascript">
			var aInput = document.getElementsByTagName("input")[0];
			var oP = document.getElementsByTagName("p")[0];
			var oImg = document.getElementsByTagName("img")[0];
			aInput.onmousedown = function(e){
				oP.innerHTML = "功能已激活";
				var evt = e || event;
				evt.stopPropagation();		//阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
				document.onmousedown = function(e){
					var arr = [];
					var evt = e || event;
					var x = evt.clientX;
					var y = evt.clientY;
					arr.push({posX:x,posY:y});
					document.onmousemove = function(e){
						var evt = e || event;
						arr.push({posX:evt.clientX,posY:evt.clientY});
						//console.log(arr);
						return false;
					}
					document.onmouseup = function(){
						var time = setInterval(function(){
							oImg.style.left = arr[0].posX + "px";
							oImg.style.top = arr[0].posY + "px";
							arr.shift();
							if(arr.length == 0){
							clearInterval(time);
							}
						},50)
						
						document.onmouseup = null;
						document.onmousemove = null;
					}
				}
			}
		</script>
	</body>
</html>

贴出来的代码颜色都没有变化的，（emmm这个小东西我可以没事划拉几下看小飞人啊哈哈~）

猜你喜欢