<强>知识要点
通过递归改变div的高度值达到缓慢下拉的效果。
<强>第一个显示()函数(下拉):初始值高度h<300年的话h + 5,反之返回退出停止,调用setTimeout方法30毫秒执行一次+ 5
<强>第二个隐藏()函数(收回):只是高度的判断不同高度h-5反之返回退出停止,调用setTimeout方法30毫秒执行一次5
<强>第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理与第一个函数一样,
并且一定要在第二个函数(收回)执行后再执行
<强>完整代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> demo
& lt; style>
身体,h2、h3 h4、h5、类推,h7,人力资源,p,引用,dl, dt, dd, ul, ol,李前,形式,自定义字段,传说,按钮,输入,文本区域,th, td{保证金:0;填充:0;}
h2、h3 h4、h5、类推,h7{字体大小:100%;}
地址、引用、dfn em, var{字体样式:正常;}
代码,kbd,前桑普{字体类型:快递新、快递等宽字体;}
ul、ol {list-style:没有;}
一个{文字修饰:没有;}
答:悬停{文字修饰:没有;}
一口{vertical-align: text-top;}
子{vertical-align: text-bottom;}
传说{颜色:# 000;}
自定义字段,img{边界:0;}
按钮,输入,选择、textarea{字体大小:100%;}
表{border-collapse:崩溃;border-spacing: 0;}
.clear{清楚:两个;浮动:没有,高度:0;溢出:隐藏;}
#{容器宽度:600 px;保证金:0汽车;}
p{行高:28 px;}
.hidden{背景:# E6E6E6;text-align:中心;高度:汽车;溢出:隐藏;}
,告诉{背景:# 808080;text-align:中心;高度:0;溢出:隐藏;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; div类="隐藏" id=安亍痹? lt; p>广告图& lt;/p> & lt;/div>
& lt; div类="显示" id=吧痰辍弊４? lt; p>哈哈哈哈改装成功& lt;/p> & lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
窗口。onload=函数aa () {
显示();
setTimeout(“隐藏()",3000);
}
var h=0;
var藏=. getelementbyid(“藏”);
var商店=. getelementbyid(“商店”);
函数显示(){
如果(h<300) {
h +=5;
hid.style.height=h +“px”;
其他}{
返回;
}
setTimeout (“()”, 30);
}
函数隐藏(){
如果(h> 0) {
h -=5;
hid.style.height=h +“px”;
其他}{
dd ();
返回;
}
setTimeout(“隐藏()”,30);
}
var=0;
函数dd () {
如果(a<60) {
+=1;
sho.style.height=a +“px”;
其他}{
返回;
}
setTimeout (dd (), 30);
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持。
