垂直方向连续滚动字幕的实现

转载 于 2012-07-09 10:01:46 发布 · 429 阅读 · 0
文章标签：

#function #div

本文将介绍如何在网页上实现一段长文本在垂直方向上的无缝滚动字幕效果，包括HTML、CSS和JavaScript的使用，以及如何利用定时器和事件监听来控制字幕的滚动，确保字幕在屏幕上的连续性和流畅性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近想实现在垂直方向上滚动字幕,并切实现字幕的无缝连接  
即在屏幕的指定区域,嵌入一段很长的文字,文字由下向上滚动,当滚   动到最末一行,首行立即紧跟着最末一行出来,与最末一行同时在一 个屏幕内滚动。 


里面可以加图片,还可加链接    
         
         
      <div   id=demo   style=overflow:hidden;height:70;width:400>      
      <div   id=demo1>    
      <a   href=''   target='_blank'>这是滚动第1行</a><br>    
      这是滚动第2行<br>    
      这是滚动第3行<br>    
      这是滚动第4行<br>    
      这是滚动第5行<br>    
      这是滚动第6行<br>    
      这是滚动第7行<br>    
      这是滚动第8行<br>    
      </div>    
      <div   id=demo2></div>    
      </div>    
      <script>    
      var   speed=30    
      demo2.innerHTML=demo1.innerHTML    
      function   Marquee()    
      {    
      if(demo2.offsetTop-demo.scrollTop<=0)    
      demo.scrollTop-=demo1.offsetHeight    
      else    
      {    
      demo.scrollTop++    
      }    
      }    
      var   MyMar=setInterval(Marquee,speed)    
      demo.onmouseover=function()   {clearInterval(MyMar)}    
      demo.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}    
      </script>