求助：网上很常见的无缝滚动动画的实现方法

本帖最后由 mycggo 于 2011-11-01 10:24:39 编辑

解决方案 »

  1.   

    楼主试试我之前帮别人做的,看能否有作用
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
     <style>
     .item{height:92px;overflow:hidden;border-bottom:1px solid #EFEFEF;margin-bottom:10px;color:blue}
     </style>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script></head>
    <body>
    <div id="testID" style="height:450px;overflow: hidden;">
    <div class="item">111111</div>
    <div class="item">222222</div>
    <div class="item">333333</div>
    <div class="item">444444</div>
    <div class="item">555555</div>
    <div class="item">666666</div>
    <div class="item">777777</div>
    <div class="item">888888</div>
    <div class="item">999999</div>
    </div>
    </body><script>
    $(function() {
        //滚动函数
        function scroll(){
            //每次将第一个div移到尾部
            $("#testID").append(function(){
                return $(this).find(".item:first");
            });
            //将第一个div以0毫秒的速度收起来，然后再以2000毫秒的速度往下滑动
            $(".item:first").slideUp(0).slideDown(2000);
        }
        //每2000毫秒执行一次滚动函数
        var timeObj = setInterval(function(){
            scroll();
        }, 2000)
        
        //鼠标移入DIV时取消滚动，移出时继续滚动
        $("#testID").mouseover(function(){
            clearInterval(timeObj);
        }).mouseout(function(){
            timeObj = setInterval(function(){
                scroll();
            }, 2000)
        });
    });    
    </script>
    </html>
      

  2.   


    谢谢，jQuery的我以前做过，想写一个原生的。