div滑动门(ie,ff)

<!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>

    var countT=0;
    <script type="text/javascript">
    //-----------------------div滑动
    var add=1.2;      //滑动展开速度越大越快
    var count=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";
        }
    }

function traggle()
{
  var mytdHeight = document.getElementById("mytd").style.height;
  //alert(mytdHeight);
  if(mytdHeight=="20px")
   over('mytd',200);
  else
   out('mytd',20);
}

    </script>

</head>
<body>
    
    <div id="mytd" style="height: 20px;
        background: #ff0066;">
        </div>
  <div onclick="traggle();" 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>

posted @ 2011-05-22 19:46 peterlee 阅读(264) 评论(0) 收藏举报

刷新页面返回顶部