DIV 特效问题

如何动态生成 DIV 背景色为 蓝色  中心有个按钮，
并且 该DIV 是由页面中心 逐渐 变大 到整个屏幕，然后 点击 DIV 上的按钮 在 逐渐变小 到中心点 到消失 ？
在线等 源码 ，谢谢~！

解决方案 »

  1.   

    <html>
    <head>
    <script>
    var bflag=true;
    var timer;
    function ff()
    {
    //document.write(escape(document.form1.tt.value));
    var obj=document.getElementById("d");
    if(bflag)
    {
        obj.style.left=obj.offsetLeft-5;
    obj.style.top =obj.offsetTop-5;
    obj.style.width =obj.clientWidth+10;
    obj.style.height =obj.clientHeight+10;
    }
    else
    {
        obj.style.left=obj.offsetLeft+5;
    obj.style.top  =obj.offsetTop+5;
    obj.style.width =obj.clientWidth-10;
    obj.style.height=obj.clientHeight-10;
    }
    if(obj.clientWidth>1000)
    {
        bflag=false;
    clearTimeout(timer);
    return;
    }
    if(obj.clientWidth<=0)
    {
    bflag=true;
    clearTimeout(timer);
    return;
    }
    timer=setTimeout("ff()", 100);
    }
    </script>
    </head>
    <body>
    <div id="d" style="background:#0099FF; position:absolute; width:300px; height:300px; left:100px; top:100px">
    </div>
    <div style="position:absolute; left:230px; top:230px; background:#CCCCCC;"><input type="button" value="clieck" onClick="ff();"></div></body>
    </html>
      

  2.   

    <html> 
    <head> 
    <script> 
    var bflag=false; 
    var timer; 
    var time ;
    function ff(){
    bflag?bflag=false:bflag=true;
    aa();
    }function aa() 
    { 
    //document.write(escape(document.form1.tt.value)); 
    var obj=document.getElementById("d"); 
    if(bflag) 
    { 
        obj.style.left=obj.offsetLeft-5; 
    obj.style.top =obj.offsetTop-5; 
    obj.style.width =obj.clientWidth+10; 
    obj.style.height =obj.clientHeight+10; 
    } 
    else 
    { 
        obj.style.left=obj.offsetLeft+5; 
    obj.style.top  =obj.offsetTop+5; 
    obj.style.width =obj.clientWidth-10; 
    obj.style.height=obj.clientHeight-10; 
    } 
    if(obj.clientWidth>1000) 
    { 
        bflag=false; 
    clearTimeout(timer); 
    return; 
    } 
    if(obj.clientWidth <=0) 
    { 
    bflag=true; 
    clearTimeout(timer); 
    return; 
    } 
    timer=setTimeout("aa()", 100); 
    } 
    function stop1(){
    clearTimeout(timer);
    }
    </script> 
    </head> 
    <body> 
    <div id="d" style="background: #CC3399; position:absolute; width:300px; height:300px; left:550px; top:250px"> 
    </div> 
    <div style="position:absolute; left:700px; top:400px; background:#CCCCCC;"> 
    <input type="button" value="start" onClick="ff();"> <input type="button" value="stop" onClick="stop1();"></div> </body> 
    </html>