`
eimhee
  • 浏览: 2106118 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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

 

 

里面可以加图片,还可加链接  
   
   
  <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>
 
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics