js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下：
这是一个层伸缩与展开的特效代码，带有点动画效果，缓慢展开，DIV+JS联合打造，看上去还不错。不受内容约束，收缩与展开的速度是可以控制的，高度、循环时间也可以改。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>层收缩</title>
<scripttype="text/javascript">
varmh=30;//高度
varstep=1;//每次变化的量
varms=10;//循环时间
functiontoggle(o){
if(!o.tid)o.tid="_"+Math.random()*100;
if(!window.toggler)window.toggler={};
if(!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
maxHeight:o.offsetHeight,
minHeight:mh,
timer:null,
action:1
};
}
o.style.height=o.offsetHeight+"px";
if(window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action*=-1;
window.toggler[o.tid].timer=setTimeout("anim('"+o.tid+"')",ms);
}
functionanim(id){
vart=window.toggler[id];
varo=window.toggler[id].obj;
if(t.action<0){
if(o.offsetHeight<=t.minHeight){
clearTimeout(t.timer);
return;
}
}
else{
if(o.offsetHeight>=t.maxHeight){
clearTimeout(t.timer);
return;
}
}
o.style.height=(parseInt(o.style.height,10)+t.action*step)+"px";
window.toggler[id].timer=setTimeout("anim('"+id+"')",ms);
}
</script>
<styletype="text/css">
div.xx{
border:solid1px;overflow:hidden;
}
div.xxh5{
border:solid1px;border-width:001px;
padding:0;margin:0;height:28px;
line-height:30px;cursor:pointer;
background:#eee;
}
</style>
</head>
<body>
<divclass="xx"><h5onclick="toggle(this.parentNode)">点击此处层伸缩</h5>
<p>Tomat6.0的配置视频教程，AVI电影格式，相当清淅了，比起图文版的教程更贴切，
不会配置Tomcat的网友，你可不要错过哦，由于视频抓图挺麻烦的，
试了多次还是抓了一个不太清淅的，大家将就吧。</p>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。