通常我们看到的菜单是点击显示,鼠标离开立马消失。我们也可以利用计时器,让显示出来的菜单匀速或加速度消失。
每次递减一个单位
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#dv {
width:80px;
height:200px;
border:1px solid black;
overflow:hidden; /*超出这个范围隐藏*/
}
</style>
<script type="text/ecmascript">
//div高度变化,比如菜单折叠
onload = function () {
document.getElementById("btn1").onclick = function () {
var div = document.getElementById("dv");
//首先获得高度
var h = div.offsetHeight;
//利用计时器
var intervalId = setInterval(function () {
//每次变化递减一个单位
h--;
if (h <= 0) {
//停下计时器
clearInterval(intervalId);
//隐藏这个框
div.style.display = "none";
}
div.style.height = h + "px";
}, 20)
};
};
</script>
</head>
<body>
<input type="button" name="name" value="文件" id="btn1" />
<div id="dv">
新建<br />
打开<br />
关闭<br />
设置<br />
</div>
</body>
</html>
用加速度的方式来实现高度变化
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#dv {
width:80px;
height:200px;
border:1px solid black;
overflow:hidden; /*超出这个范围隐藏*/
}
</style>
<script type="text/ecmascript">
//div高度变化,比如菜单折叠
onload = function () {
document.getElementById("btn1").onclick = function () {
var div = document.getElementById("dv");
//首先获得高度
var h = div.offsetHeight;
//利用计时器
//利用计时器,每20毫秒变化一次
var intervalId = setInterval(function () {
//获得div高度
var h = parseInt(div.style.height || div.offsetHeight)
//每次应该减去的高度(用加速度来递减高度)
var delta = Math.ceil(h / 10);
h = h - delta;
if (h <= 0) {
clearInterval(intervalId);//停止计时器
div.style.display = "none";//隐藏div
}
div.style.height = h - delta + "px";
}, 20)
};
};
</script>
</head>
<body>
<input type="button" name="name" value="文件" id="btn1" />
<div id="dv">
新建<br />
打开<br />
关闭<br />
设置<br />
</div>
</body>
</html>