HTML元素动画实现-优快云博客

本文介绍了一种使用HTML和JavaScript实现元素动态展开与收缩的方法。通过简单的鼠标点击事件，可以控制div元素的宽度和高度变化，实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>缓冲</title>
<style>
.divname{ width:400px; height:100px;overflow:hidden;background:#f30; margin:0 auto;}
span{float:left;display:block;padding:5px; cursor:pointer;}
</style>
<script>
//选择器
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}

//========================================================================
//id：对象id
//butid：按钮id
//dir：1为水平方式，2为上下方式
//fnum：最终目标值
//mouse：鼠标事件
//sp：速度
var tt;
function Unfold(id,butid,dir,fnum,mouse,sp){
	$(butid)[mouse]=function(){clearInterval(tt);tt=setInterval(mov,5);} //鼠标事件执行效果
	function mov(){
		var idwh=(dir==1)?parseInt($(id).offsetWidth):parseInt($(id).offsetHeight); //得到容器的宽或高
		var v=(fnum<idwh)?Math.floor((fnum-idwh)/sp):Math.ceil((fnum-idwh)/sp); //算出每次运动量
		(dir==1)?$(id).style.width=idwh+v+"px":$(id).style.height=idwh+v+"px";
		if (v==0){clearInterval(tt);}
		$("abc").innerHTML=idwh+"<br>";
	}
}
</script>
</head>

<body>
<div style="clear:both; height:30px;">
<span id="but1">左右展开</span>
<span id="but2">左右缩起</span>
<span id="but3">上下展开</span>
<span id="but4">上下缩起</span>
<span id="abc"></span>
</div>


<div class="divname" id="divid"></div>
<script>Unfold("divid","but1",1,900,"onclick",6);</script>
<script>Unfold("divid","but2",1,10,"onclick",6);</script>
<script>Unfold("divid","but3",2,500,"onclick",6);</script>
<script>Unfold("divid","but4",2,10,"onclick",6);</script>
</body>
</html>

缓冲效果