夏日博客

A-A+

js实现文字左右滚动效果

2016年10月14日 前端设计 暂无评论 阅读 7 views 次

文字滚动效果一般用于通知，公告类的下面我来给大家详细的介绍关于两个实现文字滚动的效果，有需要的朋友可参考。

最简单的文字向上滚动效果利用MARQUEE,代码如下:

  1. <MARQUEE onmouseover=this.stop() style="WIDTH: 100%; HEIGHT: 195px" onmouseout=this.start() scrollAmount=2 direction=up><a href="sys_clew1.jsp">1</a><br><a href="sys_clew2.jsp">2</a><br><a href="sys_clew3.jsp">3</a><br></MARQUEE>  

上面的方法是我刚学程序时写的,下面百度一个不错的代码。

  1. <div id="dvvv" style="overflow: hidden; height: 27px; width: 750px;">  
  2. <div id="dvvv1">  
  3. <ul style="padding-left: 0px; margin-top: 0px;">  
  4. <li style="list-style-type: none;white-space:nowrap“>  
  5. 滚动吧，不停的文字滚动吧。</li>。  
  6. </ul>  
  7. </div>  
  8. <div id="dvvv2">  
  9. </div>  
  10. </div>  
  11.   
  12. <script type="text/javascript">  
  13. var speded=30  
  14. dvvv2.innerHTML=dvvv1.innerHTML  
  15. function Marqpuee(){  
  16. if(dvvv2.offsetWidth-dvvv.scrollLeft<=0)  
  17. dvvv.scrollLeft-=dvvv1.offsetWidth  
  18. else{  
  19. dvvv.scrollLeft++  
  20. } //xiariboke.net  
  21. }  
  22. var MyMmar=setInterval(Marqpuee,speded)  
  23. dvvv.onmouseover=function() {clearInterval(MyMmar)}  
  24. dvvv.onmouseout=function() {MyMmar=setInterval(Marqpuee,speded)}  
  25. </script>  
标签：

给我留言