使用JavaScript实现新闻滚动效果

最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种：

使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。
使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。

使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    var layerHeight = 100; //定义滚动区域的高度：100  
    var iFrame = 1; //定义每帧移动的象素
    var iFrequency = 50; //定义帧频率
    var timer; //定义时间句柄

    //滚动新闻动作，相当于拖动layer1滚动条向下滚动，实现新闻滚动效果
    function move()
    {  
       if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight)//如果拖动完div2中的新闻，重置滚动条位置
       {  
           document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);  
       }  
       else 
       {  
           //效果等同于向下拖动layer1的滚动条，形成新闻滚动效果
           document.getElementById("layer1").scrollTop += iFrame;  
       }  
   }  

            window.onload=function()
            {
                  //设置layer1高度
                  if(document.getElementById("layer2").offsetHeight >= layerHeight) 
                  {
                       document.getElementById("layer1").style.height = layerHeight;  
                  }
                  else 
                  {
                       document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
                  }

                  //将layer2中的内容复制到layer3，用两个div实现新闻循环滚动效果
                  document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML; 
                  
                  //开始滚动新闻
                  timer = setInterval("move()",iFrequency);  

                  //当鼠标移上去时，停止滚动
                  document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}  
                  document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}  
            }
</script>   
</head>
<body>
<div id='layer1' style="overflow-y:hidden;">  
   <div id='layer2'>  
             <table cellspacing="0" cellpadding="0" border="0" width="63">  
                        <tr>  
                            <td height="10"/>aaaaaaaaaa</td> 
                        </tr>  
                        <tr>  
                            <td height="10"/>bbbbbbbbbb</td> 
                        </tr> 
                         <tr>  
                            <td height="10"/>cccccccccc</td> 
                        </tr>  
              </table>  
        </div>  
        <div id='layer3'></div>  
    </div>   
</body>
</html>

转载自http://blog.csdn.net/jubincn/article/details/4689337