移动轨迹回放
程序员文章站
2022-07-05 12:59:16
...
这两天的作业压死个人，就没空写东西了，先贴一个刚新鲜出炉还热乎的代码~
主要功能是：在页面中按下并移动鼠标，释放时，小人会按照鼠标移动轨迹运动
核心主要是按下鼠标事件 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这个小东西我可以没事划拉几下看小飞人啊哈哈~）