本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了弹出层的动画效果。通过定时器逐步改变弹出层的宽度和高度，可以实现平滑的展开和收起动画。此示例适用于初学者学习基本的网页动画制作。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>弹出层的动画效果</title>
<script type="text/javascript">
function ts(doType){
var obj=document.getElementById("menuLeft");
var anim1 = function(){
n += 15;
if(n >= 350){
window.clearInterval(ttt);
if(doType==0){
obj.style.width="0px";
obj.style.height="0px";
}else{
obj.style.width="350px";
obj.style.height="350px";
}
}else{
if(doType==0){
obj.style.width=(350 - n)+"px";
obj.style.height=(350 - n)+"px";
}else{
obj.style.width=n+"px";
obj.style.height=n+"px";
}
}
},n=0;
var ttt = window.setInterval(anim1,10);
return false;
}
</script>
</head>
<body onLoad="ts(1);">
<div id="menuLeft" style="border:1px #ccc solid; width:0px; height:0px;"></div>
<input type="button" value=" Open " name="c" onClick="ts(1);">
<input type="button" value=" Close " name="op" onClick="ts(0);">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
