javascript实现缓慢进出效果

本帖最后由 liebezero 于 2010-04-21 16:46:33 编辑

解决方案 »

  1.   

    使用jquery做的话 非常简单
      

  2.   

    <script type="text/javascript">
    var time = 300;
    var h = 0;
    function addCount()
    {
        if(time>0)
        {
            time--;
            h=h+5;
        }
        else
        {
            return;
        }
        if(h>300)  
        {
            return;
        }
        document.getElementById("two").style.display="block";
        document.getElementById("two").style.width=h+"px";
        document.getElementById("one").style.marginLeft=h+"px";
        setTimeout("addCount()",30);
    }
    </script>
    自己照网上的写了点.有个问题.为什么two和one会一起marginLeft
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    var flag = false;
    var timerNum = 0;

    function doClick() {
    if (timerNum != 0) {
    clearInterval(timerNum);
    timerNum = 0;
    }

    var contentWidth = -1 * parseInt(document.getElementById("content").style.width);
    var container = document.getElementById('test');
    var speed = 5; if (flag == true) {
    speed = -1 * speed;
    }

    timerNum = setInterval(function() { var currentLeft = parseInt(container.style.left) + speed; 

    if (currentLeft <= contentWidth||
    currentLeft >= 0) {
    clearInterval(timerNum); timerNum = 0;

    if (currentLeft <= contentWidth) {
    currentLeft = contentWidth;
    }
    if (currentLeft >= 0) {
    currentLeft = 0;
    }
    }
    container.style.left = currentLeft + 'px';

    }, 100);
    flag = flag == true ? false : true;
    }
    </script>
    </head>
    <body>
    <div id="test" style="position:absolute; left:-300px;">
    <span id="content" style="display:inline-block; width: 300px; height:400px; border-style:solid; border-width:1px;">

    </span>
    <span style="margin-bottom:290px;position: relative; top:2px; display:inline-block; width: 20px; height:100px; border-style:solid; border-width:1px; background-color:#ffffff; cursor:pointer;" onclick="doClick();"></span>
    </div>
    </body>
    </html>照着你的想法写了个简单的。看看
      

  4.   

    不好意思，刚才我的代码里用了
    <span>
    </span>
    <span></span>这样的代码结构请把它改成
    <span>
    </span><span></span>按照原来的写法在IE6,7以外的地方会有空隙。
    把
    </span>
    <span>
    改成
    </span><span>
    就正常了