JavaScript DOM中改变样式属性，实现动画效果 2

最新推荐文章于 2023-10-25 13:29:57 发布

原创最新推荐文章于 2023-10-25 13:29:57 发布 · 505 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript DOM 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的简单动画效果案例，包括元素颜色变化、背景色改变以及通过定时器控制元素位置移动等内容。文章还展示了如何通过鼠标悬停触发样式更改，实现了基本的用户交互。

具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>无标题文档</title>
<style type="text/css">
#demo1{
	width:300px;
	height:200px;
	border:3px solid #F00;
}
</style>
<script>

function ceh1(element)
{
	element.style.color="#0f0";
	element.style.backgroundColor="#a4c639";
	movement=setTimeout("ceh3()",1000);
}
function ceh2(element)
{
	element.style.color="";
	element.style.backgroundColor="";
}
function ceh3()
{
	element=document.getElementById("demo1");
	xpox=parseInt(element.style.left);
	ypox=parseInt(element.style.top);
	if(xpox==700 && ypox==300)
	return true;
	if(xpox<700)xpox++;
	else xpox--;
	if(ypox<300)ypox++;
	else ypox--;
	element.style.left=xpox+"px";
	element.style.top=ypox+"px";
	movement=setTimeout("ceh3()",10);
}
</script>
</head>

<body>
<div id="demo1" onMouseOver="ceh1(this)" onMouseOut="ceh2(this)" style="position:absolute; top:100px; left:100px;">
</div>
</body>
</html>