首页 » 技术 » 网络 » 前端 » 利用Javascript实现翻滚新闻文字效果

利用Javascript实现翻滚新闻文字效果

有很多的网站都有一行字通过翻滚更新文字内容和链接的区域,这样的效果使页面在有效的空间内变得更加动感。
实现方法如下,其中Javascript部分:

  1. <script>   
  2. function rolling(id,w,n){   
  3.     var box=document.getElementById(id),can=true,w=w||1500,fq=fq||10,n=n==-1?-1:1;   
  4.     box.innerHTML+=box.innerHTML;   
  5.     box.onmouseover=function(){can=false};   
  6.     box.onmouseout=function(){can=true};   
  7.     var max=parseInt(box.scrollHeight/2);   
  8.     new function (){   
  9.         var stop=box.scrollTop%18==0&&!can;   
  10.         if(!stop){   
  11.             var set=n>0?[max,0]:[0,max];   
  12.             box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n;   
  13.         };   
  14.         setTimeout(arguments.callee,box.scrollTop%18?fq:w);   
  15.     };   
  16. };   
  17. rolling(‘div-news’,1500,-1);   
  18. </script>   

CSS样式定义,其中Arrowb为前面的小指针,可以自己设置图片改变。

  1. .shell{   
  2.     background:url(http://clyee.com/img/arrowb.gif) no-repeat 4px 5px;   
  3.     border:0px solid #aaa;    
  4.     width:300px;   
  5.     padding:3px 2px 2px 25px;    
  6. }   
  7. .core{   
  8.     height:18px;   
  9.     overflow:hidden;   
  10.     font-size:12px;   
  11. }  

最后,HTML部分:

  1. 1.<div class=“shell”>     
  2.  2.    <div id=“div-news” class=“core”>     
  3.  3.      <a href=“#″ target=“_blank”>测试翻滚条</a><br />     
  4.  4.      <a href=“#” rel=“nofollow” target=“_blank”>测试翻滚条</a><br />     
  5.  5.    </div>       
  6.  6.</div>     

Comments are currently closed.