这个效果如何实现，多谢

有一个DIV，高度不固定，我想做一个函数，实现这个效果点一个按钮后，div逐渐消失，例如高度从100逐渐减少到0，最后消失；再点一下按钮，div高度从0再逐渐增加到100

解决方案 »

  1.   

    window.setInterval//隔段时间改变div高度
      

  2.   


    <div id="f" style="width:60;height:60;border:2px solid #cccccc;padding:20px;position:absolute;
    z-index:10;background:url('images/window.jpg');"> 
    <span id="lt" style="color:#red;font-size:14px;height:20px;background-color:#8866ff;"></span>
    <input type="button" value="×" style="font-size:14px;height:20px;width:20px;color:#009900;font-weight:bold;" title="关闭窗口"; onClick="t2=t2+t3"></input><!--添加浮动新闻-->
    <a target=_blank href='#' style="font-size:13px;">
    <br /><br />网上成绩查询定于1月20日上午8:00开放！
    </a></div>var w=250;var h=200;var d=document.body;var l=(d.clientWidth-w)/2;var t=(d.clientHeight-h)/2;var ft=1;
    var step=50;var time=10;var t1=ft*1000/step;var t2=60;var t3=(w-t2)*time/ft+w;var t4=0;var t5=time;var t6=t2;
    function flashad(){if(l<0||t<0){t2+=t3;}if(t2>=t3){t5=0;if(t4>t6){t4-=(w-t6)/t1;}
      else{clearTimeout(timer);f.style.display="none";return;}}
     if(t2<=w){t4=t2;t5=time;}if(t2>w&&t2<t3){t5=Math.floor(time-(t2-w)/(w-t6)*ft);}
     t2+=(w-t6)/t1;f.style.width=t4-50;f.style.height=(t6*h/w)+(t4-t6)*(h-t6*h/w)/(w-t6)-30;
     f.style.left=(t4-t6)*l/(w-t6)+d.scrollLeft-250;f.style.top=100+(t4-t6)*t/(w-t6)+d.scrollTop;
     lt.style.width=t4+28;lt.innerText=t5+"秒后自动关闭        "; 
     var timer=setTimeout("flashad()",step);}
    flashad();
      

  3.   

    这个可以用jQuery的tigger，很方便
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>openDiv.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
         var speed = 50;
    var maxheight = 450;

    //点击checkBox引发此函数
    function divPopup(event, item){
    var ruleDiv = document.getElementById("smsDiv");
    if(item.checked){
    DivShow(ruleDiv);
    }else{
    DivHide(ruleDiv);
    }
    }

    //DIV展开与收起的两个函数
    function DivShow(item) {
    var temp = item.style.height;
    item.style.height = parseInt(temp.substring(0, temp.length - 2)) + speed + "px";
    temp = item.style.height;
    if(parseInt(temp.substring(0, temp.length - 2)) < maxheight){
    setTimeout(function () {
    DivShow(item);
    }, 100);
    }
    }

    function DivHide(item) {
    var temp = item.style.height;
    item.style.height = parseInt(temp.substring(0, temp.length - 2)) - speed + "px";
    temp = item.style.height;
    temp = parseInt(temp.substring(0, temp.length - 2));
    if(temp > 0){
    setTimeout(function () {
    DivHide(item);
    }, 100);
    }
    }
        </script>
      </head>
      
      <body>
       <input type="checkbox" onclick="divPopup(event, this)"/>
        <div id="smsDiv" style="border: 1px solid red; width: 200px; height: 200px; background-color: #CCCCFF;"></div>
      </body>
    </html>
      

  5.   


    <!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=gb2312" />
    <title>无标题文档</title>
    <style>
    #aa {
    width: 500px;
    height: 30px;
    line-height: 30px;
    background: red;
    }

    #bb {
    width: 500px;
    height: 300px;
    background: yellow;
    }

    #saa {
    float: right;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
    }

    .a1 {
    background: black;
    width: 50px;
    height: 30px;
    }

    .a2 {
    background: blue;
    width: 50px;
    height: 30px;
    }
    </style>
    </head> <body>
    <div id="aa">
    <span id="saa" class="a1"></span>
    </div>
    <div id="bb"></div>
    <div style="width: 500px; height: 300px; background: green; display: none;"></div>
    <script type="text/javascript">
    function $(id){return document.getElementById(id)}

    var b = 300;
    function aaa() {
    var bb = document.getElementById('bb');
        if(b <= 300) {
        b += 5;
        if (b > 300) {return;}
        bb.style.height = b+"px";
    }
    setTimeout("aaa()", 50);
    }
    function bbb(){
    var bb = document.getElementById('bb');
        if(b >= 0){
        b -= 5;
        if (b < 0) {return;}
        bb.style.height = b+"px";
        }
        setTimeout("bbb()", 50);
    }

    $('saa').onclick = function() {
        if($('saa').className == "a1"){
         //$("bb").style.display = "none";
         $('saa').className = "a2";
         //setTimeout("bbb()",1000);
         bbb();
        } else {        
        //$("bb").style.display = "block";
        $('saa').className = "a1";
        //setTimeout("aaa()",1000);
        aaa();
        }     
     }
    </script> </body>
    </html>
    当然，如果用jquery就很简单了
      

  6.   


    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#btnShow').click(function(event){
    $('#divPop').slideToggle(500);
    });
    });
    </script>
    </head><body>
    <div>
        <input type="button" id="btnShow" value="显示提示文字" />
    </div>
    <div id="divPop" style="background-color:#f0f0f0; border:1px solid #000; display:none; width:300px; height:100px;">
    </div>