动画效果练习，请教

本帖最后由 sz861128 于 2011-07-05 16:30:54 编辑

解决方案 »

  1.   

    <script type="text/javascript">
    var speed=3;
    function contact(){
        var oDiv=document.getElementById('content');
        oDiv.style.width=oDiv.offsetWidth+speed+"px";
        oDiv.style.height=oDiv.offsetHeight+speed+"px";
        var t=   window.setTimeout(contact,5);
        if(oDiv.offsetWidth>=100){
            window.clearTimeout(t);
        }
    }
    </script>
    <body>
    </body>
    </html>
      

  2.   

    <style type="text/css">
    .container{width:300px; height:300px; background:#9C0; position:relative; margin:150px auto 0}
    #content{width:50px; height:50px; background:#F00; position:absolute; top:0; left:0}
    </style>
    <div class="container">
        <div id="content" onmouseover="contact()"></div>
    </div>
    <script type="text/javascript">
    var speed=3;
    function contact(){
        var oDiv=document.getElementById('content');
        oDiv.style.width=oDiv.offsetWidth+speed+"px";
        oDiv.style.height=oDiv.offsetHeight+speed+"px";
        if(oDiv.offsetWidth<100){
            window.setTimeout(contact,5);
    }
    }
    </script>
      

  3.   


    var speed=3;
    function contact(){
    var oDiv=document.getElementById('content');
    oDiv.style.width=oDiv.offsetWidth+speed+"px";
    oDiv.style.height=oDiv.offsetHeight+speed+"px";
    if(oDiv.offsetWidth<=100){
    window.setTimeout(contact,5);
    }
    }
    function contact2(){
    var oDiv=document.getElementById('content');
    oDiv.style.width=oDiv.offsetWidth-speed+"px";
    oDiv.style.height=oDiv.offsetHeight-speed+"px";
    if(oDiv.offsetWidth>=50){
    window.setTimeout(contact,5);
    }
    }如果想让其，鼠标移出后再缩小，是否是这样写？这么些又错在哪里呢
      

  4.   


    <div class="container">
    <div id="content" onmouseover="contact()" onmouseout="contact2()"></div>
    </div>
      

  5.   

    <style type="text/css">
    .container{width:300px; height:300px; background:#9C0; position:relative; margin:150px auto 0}
    #content{width:50px; height:50px; background:#F00; position:absolute; top:0; left:0}
    </style>
    <div class="container">
      <div id="content" onmouseover="contact(1)" onmouseout="contact(0)"></div>
    </div>
    <script type="text/javascript">
    var speed=3;
    var maxWidth = 300;
    var minWidth = 50;
    var isLock = false;
    function contact(isMouseOver){
    if(isMouseOver){
    var oDiv=document.getElementById('content');
    if(oDiv.offsetWidth >= maxWidth){
    return false;
    }
    oDiv.style.width=oDiv.offsetWidth+speed+"px";
    oDiv.style.height=oDiv.offsetHeight+speed+"px";
    if(oDiv.offsetWidth<maxWidth){
    window.setTimeout("contact(1)",5);
    }
    }else{
    var oDiv=document.getElementById('content');
    if(oDiv.offsetWidth <= minWidth){
    return false;
    }
    oDiv.style.width=oDiv.offsetWidth-speed+"px";
    oDiv.style.height=oDiv.offsetHeight-speed+"px";
    if(oDiv.offsetWidth>minWidth){
    window.setTimeout("contact(0)",5);
    }
    }
    }
    还有点缺陷，大致就这个思路了
      

  6.   

    好了，这个还将就着<style type="text/css">
    .container{width:300px; height:300px; background:#9C0; position:relative; margin:150px auto 0}
    #content{width:50px; height:50px; background:#F00; position:absolute; top:0; left:0}
    </style>
    <div class="container">
      <div id="content" onmouseover="contact(1)" onmouseout="contact(0)"></div>
    </div>
    <script type="text/javascript">
    var speed=3;
    var maxWidth = 300;
    var minWidth = 50;
    var sto1, sto2;
    function contact(isMouseOver){
    if(isMouseOver){
    var oDiv=document.getElementById('content');
    if(oDiv.offsetWidth >= maxWidth){
    return false;
    }
    clearTimeout(sto2);
    oDiv.style.width=oDiv.offsetWidth+speed+"px";
    oDiv.style.height=oDiv.offsetHeight+speed+"px";
    if(oDiv.offsetWidth<maxWidth){
    sto1 = window.setTimeout("contact(1)",5);
    }
    }else{
    var oDiv=document.getElementById('content');
    if(oDiv.offsetWidth <= minWidth){
    return false;
    }
    clearTimeout(sto1);
    oDiv.style.width=oDiv.offsetWidth-speed+"px";
    oDiv.style.height=oDiv.offsetHeight-speed+"px";
    if(oDiv.offsetWidth>minWidth){
    sto2 = window.setTimeout("contact(0)",5);
    }
    }
    }
    </script>