使用JavaScript实现新闻滚动效果

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

  1. 使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行。
  2. 使用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

你可能感兴趣的:(JavaScript)