JavaScript DOM编程艺术—javascript实现移动元素动画

最新推荐文章于 2023-07-05 21:16:43 发布

码动传奇

最新推荐文章于 2023-07-05 21:16:43 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013806814/article/details/49922891

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

将文档中的某个元素摆放到特定位置，并设置其移动至指定位置。

test.html

<!doucment html>
<html>
<body>
	<p id="message">Wheel!</p>
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="moveMessage.js"></script>
</body>
</html>

addLoadEvent.js

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof oldonload != 'function'){
		window.οnlοad= func;
	}
	else{
		oldonload();
		func();
	}
}

moveMessage.js

addLoadEvent(positionMessage);
//将元素指定到某个位置
function positionMessage(){
	var elem = document.getElementById('message');
	elem.style.position = "relative";
	elem.style.left="20px";
	elem.style.top="50px";
	elem.style.fontColor="red";
	moveMessage("message",200,100,10)
}
//将移动元素函数抽象
function moveMessage(elementID,end_x,end_y,interval){
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(xpos == end_x &&ypos == end_y){
		return true;
	}
	if(xpos < end_x){xpos++;}
	if(xpos > end_x){xpos--;}
	if(ypos < end_y){ypos++;}
	if(ypos > end_y){ypos--;}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveMessage('"+elementID+"',"+end_x+","+end_y+","+interval+")";
	movement = setTimeout(repeat,interval);
}

码动传奇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术—javascript实现移动元素动画

test.html Wheel!addLoadEvent.jsfunction addLoadEvent(func){ var oldonload = window.onload; if(typeof oldonload != 'function'){ window.onload= func; } else{ oldonload(); func();
复制链接

扫一扫