<!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>
<title>无标题页</title>
<script type="text/javascript">
//-----------------------div滑动
var add=1.2; //滑动展开速度 越大越快
var count=0; //递增初始值
var countT=0;
var act;
function over(s,nMax){
var obj=document.getElementById(s);
var h = parseInt(obj.offsetHeight);
if (h+count < nMax){
obj.style.height = (h + count)+"px";
clearTimeout(act);
act = setTimeout("over(\'"+s+"\',"+nMax+")", 10);
count +=add;
}
else{
obj.style.height = nMax+"px";
count=0;
}
}
function out(s,nMin){
var obj=document.getElementById(s);
var h = parseInt(obj.offsetHeight);
if (h-count > nMin){
obj.style.height = (h - count)+"px";
clearTimeout(act);
act = setTimeout("out(\'"+s+"\',"+nMin+")", 10);
count +=add;
}
else{
obj.style.height = nMin+"px";
count=0;
}
}
//---------------------------------
function deploy(a,b,c,d,nMax,nMin){
document.getElementById(a).style.width=nMin+\'px\';
document.getElementById(b).style.width=nMin+\'px\';
document.getElementById(c).style.width=nMin+\'px\';
overT(d,nMax);
}
function overT(s,nMax){
var obj=document.getElementById(s);
var h = parseInt(obj.offsetWidth);
if (h+countT < nMax){
obj.style.width = (h + countT)+"px";
clearTimeout(act);
act = setTimeout("overT(\'"+s+"\',"+nMax+")", 10);
countT +=add;
}
else{
obj.style.width = nMax+"px";
countT=0;
}
}
var ran;
var ranW;
var r=0;
function randoms(){
ran = parseInt(Math.random()*(4)+1);
ranW = parseInt(Math.random()*(1000)+60);
if(ran!=r){
switch(ran){
case 1:deploy(\'div2\',\'div3\',\'div4\',\'div1\',ranW,40);r==ran;break;
case 2:deploy(\'div1\',\'div3\',\'div4\',\'div2\',ranW,40);r==ran;break;
case 3:deploy(\'div1\',\'div2\',\'div4\',\'div3\',ranW,40);r==ran;break;
default :deploy(\'div1\',\'div2\',\'div3\',\'div4\',ranW,40);r==ran;
}
}
setTimeout("randoms()",50);
}
</script>
<script language="javascript" type="text/javascript">
var heights=200;
var speed=4;
var timeout;
function testOpen(id){
var obj=document.getElementById(id);
var y = parseInt(obj.style.height,10);
if (y < heights){
obj.style.height = (y + Math.ceil((heights - y)/speed))+"px"; //递增
clearTimeout(timeout);
timeout = setTimeout("testOpen(\'"+id+"\')", 6);
}
else{
obj.style.height = heights+"px";
}
}
function testClose(id){
var obj = document.getElementById(id);
var y = parseInt(obj.style.height,10);
if ( y>1){
var value = (y - Math.ceil(y/speed)) //递增
value = value == 0?1:value;
obj.style.height=value+"px";
clearTimeout(timeout);
timeout = setTimeout("testClose(\'"+id+"\')", 6);
}
else{
obj.style.height = 1+"px";
}
}
</script>
</head>
<body>
<!--onload="randoms();"-->
<div id="mytd" onmouseover="over(\'mytd\',200);" onmouseout="out(\'mytd\',20);" style="height: 20px;
background: #ff0066;">
代码实例：层的滑动展开/折叠</div>
<br />
<br />
<br />
<div id="div1" style="height: 20px; width: 40px; background: #99ccff" onmouseover="deploy(\'div2\',\'div3\',\'div4\',\'div1\',1000,40);">
DIV
</div>
<div id="div2" style="height: 20px; width: 40px; background: #66FFFF" onmouseover="deploy(\'div1\',\'div3\',\'div4\',\'div2\',1000,40);">
DIV
</div>
<div id="div3" style="height: 20px; width: 40px; background: #0000ff" onmouseover="deploy(\'div1\',\'div2\',\'div4\',\'div3\',1000,40);">
DIV
</div>
<div id="div4" style="height: 20px; width: 40px; background: #000000" onmouseover="deploy(\'div1\',\'div2\',\'div3\',\'div4\',1000,40);">
DIV
</div>
<br />
<br />
<br />
<button id="button2" onclick="testOpen(\'div5\');">
open</button>
<button id="Button1" onclick="testClose(\'div5\');">
close</button>
<div id="div5" style="height: 1px; width: 40px; background: #66FFFF">
DIV
</div>
</body>
</html>