拖拽回放

最新推荐文章于 2022-08-22 08:46:56 发布

阿昕_

最新推荐文章于 2022-08-22 08:46:56 发布

阅读量402

点赞数

分类专栏： JavaScript 文章标签：拖拽回放

本文链接：https://blog.csdn.net/believeXin/article/details/52046881

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏


利用数组将Div的运动轨迹保存下来，即可实现回放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{width: 2px;height: 2px;background: black;position: absolute;}
			#div{width: 100px;height: 100px;background: blue;position: absolute;cursor: pointer;}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var oBtn = document.getElementById('btn');
				var oDiv = document.getElementById('div');
				var arr = [];
				
				oDiv.onmousedown = function(ev){
					var oEvent = ev||event;
					var disX = oEvent.clientX - oDiv.offsetLeft;
					var disY = oEvent.clientY - oDiv.offsetTop;
					arr = [];
					document.onmousemove = function(ev){
						var oEvent = ev||event;
						var l = oEvent.clientX - disX;
						var t = oEvent.clientY - disY;
						
						oDiv.style.left = l + 'px';
						oDiv.style.top = t + 'px';
						
						var aDiv = document.createElement('div');
						aDiv.style.left = l + 'px';
						aDiv.style.top = t + 'px';
						document.body.appendChild(aDiv);
						
						var pos = {left:l,top:t};
						arr.unshift(pos);
						
						
					};
					
					document.onmouseup = function(){
						document.onmousemove = null;
										
						oBtn.onclick = function(){
							var num=0;
							var timer = null;
							
							timer =  setInterval(function(){
								oDiv.style.left = arr[num].left + 'px';
								oDiv.style.top = arr[num].top + 'px';
								num++;
								if(num == arr.length)
									clearInterval(timer);
							},100);
						};
					};

				};
				
				
				
			};
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="回放" />
		<div id="div"></div>
		
	</body>
</html>