JavaScript 添加元素，动画，然后删除。

最新推荐文章于 2022-02-21 16:15:05 发布

TheDeaf

最新推荐文章于 2022-02-21 16:15:05 发布

阅读量2.7k

点赞数

分类专栏：学习 JavaScript 文章标签： javascript 动画

本文链接：https://blog.csdn.net/mj511099781/article/details/25384819

版权

学习同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

搞了半天，要让元素动起来关键问题是要设置position属性，否则白费劲！！

不多说，上源码。

<!DOCTYPE html>
<html>
<head>
	<title>flay</title>
</head>
<body>
	<script>
		window.οnlοad=function(){
			var x = 10;//初始位置
			var y = 10; //初始位置
			var time = 0;//移动次数计数
			var objMove = document.createElement("div");
			objMove.id = "move";
			objMove.style.width="100px";
			objMove.style.height="100px";
			objMove.style.top = y+"px";
			objMove.style.left= x+"px";
			objMove.style.backgroundColor="#0f0";
			objMove.style.position = "absolute";//*require
			document.body.appendChild(objMove);
			var moveIt =  function(){
				time++;
				if(time > 16){//移动一定次数后删除
					document.body.removeChild(objMove);
					moveIt = null;return;
				}
				x+=20;
				y+=20;
				objMove.style.top = y+"px";
				objMove.style.left = x+"px";
				if(moveIt){
					setTimeout(moveIt, 100);
				}
			}
			setTimeout(moveIt, 100);
		}
		
	</script>
</body>
</html>