javascript基础练习-拖拽练习

最新推荐文章于 2023-03-17 11:08:42 发布

wz前端初学者

最新推荐文章于 2023-03-17 11:08:42 发布

阅读量278

点赞数

分类专栏： javascript小练习文章标签： javascript 拖拽回放轨迹

本文链接：https://blog.csdn.net/wz13759497175/article/details/79233308

版权

javascript小练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

效果图如下(先拖拽,后回放):

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	  *{
	  		margin: 0;
            padding: 0;
        }
        #box{
    		width: 100px;
    		height:auto;
    		background:	rgba(255,165,0,0.6);
    		position:absolute;
            top: 100px;
            left: 500px;
            color: white;

        }
        #box .content{
        	width: 100%;
        	height: auto;
        	padding: 10px;
        }
        #box .drag{
        	cursor: move;
        	width: auto;
        	background: orange;
        	height: 30px;
        }
        #box .play{
        	background: orange;
        	width: auto;
        	height: 30px;
        	line-height: 30px;
        	text-align: center;
        	color: white;
        	cursor: pointer;
        }
	</style>
	<script type="text/javascript">
		window.οnlοad=function(argument){
			var a=document.getElementById('box'),
				b=a.getElementsByTagName('div'),
				Drag,
				arr=[],
				X,
				Y;
			b[0].οnmοusedοwn=function(event){
				Drag=true;
				var event=event || window.event;
				X=event.clientX-a.offsetLeft;
				Y=event.clientY-a.offsetTop;
				//将包含方块坐标信息的对象推入数组
				arr.push({X:event.clientX-X,Y:event.clientY-Y});
			};
			document.οnmοusemοve=function(event){
				if (Drag) {
					a.style.left=event.clientX-X+"px";
					a.style.top=event.clientY-Y+"px";
					b[1].innerHTML="left:"+a.offsetLeft+"<br/>"+"top:"+a.offsetTop;
					arr.push({X:event.clientX-X,Y:event.clientY-Y});
				}
			};
			document.οnmοuseup=function(){
				Drag=false;
			};
			//点击回放,通过setInterval函数每隔一段时间抛出数组中存放的包含坐标信息的对象
			b[2].οnclick=function(){
				if(arr.length>1){
					var timer=setInterval(function(){
						var popArr=arr.pop();
						if (popArr) {
							a.style.left=popArr.X+"px";
							a.style.top=popArr.Y+"px";
							b[1].innerHTML="left:"+a.offsetLeft+"<br/>"+"top:"+a.offsetTop;
						}else{
							clearInterval(timer);
						}
					},30);
				}
			};
			b[1].innerHTML="left:"+a.offsetLeft+"<br/>"+"top:"+a.offsetTop;
		}
	</script>
</head>
<body>
	<div id="box">
		<div class="drag"></div>
		<div class="content"></div>
		<div class="play">回放</div>
	</div>
</body>
</html>

wz前端初学者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript基础练习-拖拽练习

效果图如下(先拖拽,后回放): *{ margin: 0; padding: 0; } #box{ width: 100px; height:auto; background: rgba(255,165,0,0.6); position:absolute;
复制链接

扫一扫