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

最新推荐文章于 2017-06-15 11:22:32 发布

iteye_3946

最新推荐文章于 2017-06-15 11:22:32 发布

阅读量243

点赞数

文章标签： lua

本文介绍了一种在网页中实现垂直滚动字幕的方法，并通过HTML和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>