js控制div高度收缩！~
谁能帮我写下！如何用js让一个div的高度动态的递增为100然后再从100递减至0！然后停止！~很头疼呢！写不出来......
谁能帮我写下！如何用js让一个div的高度动态的递增为100然后再从100递减至0！然后停止！~很头疼呢！写不出来...
展开
1个回答
展开全部
写了一个小实例，请参考一下吧。
<!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=utf-8" />
<title>菜单</title>
<style type="text/css">
#wrap{width:200px;height:1px;overflow:hidden;border:1px solid green;}
</style>
</head>
<body>
<div id="wrap"></div>
<script type="text/javascript">
var wrap=document.getElementById("wrap");
//alert(document.getElementById("wrap"));
var wrapHeight=1;
var timer1=setInterval("addHeight()",10);
var timer2;
function addHeight(){
if(wrapHeight==100){
clearInterval("timer1");
timer2=setInterval("reduceHeight()",10);
}
wrapHeight++;
wrap.style.height=wrapHeight+"px";
}
function reduceHeight(){
if(wrapHeight==0){
clearInterval(timer2);
}
wrapHeight--;
wrap.style.height=wrapHeight+"px";
}
</script>
</body>
</html>
<!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=utf-8" />
<title>菜单</title>
<style type="text/css">
#wrap{width:200px;height:1px;overflow:hidden;border:1px solid green;}
</style>
</head>
<body>
<div id="wrap"></div>
<script type="text/javascript">
var wrap=document.getElementById("wrap");
//alert(document.getElementById("wrap"));
var wrapHeight=1;
var timer1=setInterval("addHeight()",10);
var timer2;
function addHeight(){
if(wrapHeight==100){
clearInterval("timer1");
timer2=setInterval("reduceHeight()",10);
}
wrapHeight++;
wrap.style.height=wrapHeight+"px";
}
function reduceHeight(){
if(wrapHeight==0){
clearInterval(timer2);
}
wrapHeight--;
wrap.style.height=wrapHeight+"px";
}
</script>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
