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

最新推荐文章于 2021-05-30 18:30:41 发布

edmond80

最新推荐文章于 2021-05-30 18:30:41 发布

阅读量393

点赞数

分类专栏： ExtJS 文章标签： function div

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

里面可以加图片,还可加链接    
         
         
      <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.οnmοuseοver=function()   {clearInterval(MyMar)}    
      demo.οnmοuseοut=function()   {MyMar=setInterval(Marquee,speed)}    
      </script>