Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › JS垂直方向连续滚动字幕的实现
返回列表 发新帖

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

[复制链接]
authicon dly 发表于 2011-12-6 21:27:23 | 显示全部楼层 |阅读模式
最近想实现在垂直方向上滚动字幕,并切实现字幕的无缝连接   
即在屏幕的指定区域,嵌入一段很长的文字,文字由下向上滚动,当滚   动到最末一行,首行立即紧跟着最末一行出来,与最末一行同时在一 个屏幕内滚动。
  1. 里面可以加图片,还可加链接


  4. <div id=demo style=overflow:hidden;height:70;width:400>
  5. <div id=demo1>
  6. <a href='' target='_blank'>这是滚动第1行</a><br>
  7. 这是滚动第2行<br>
  8. 这是滚动第3行<br>
  9. 这是滚动第4行<br>
  10. 这是滚动第5行<br>
  11. 这是滚动第6行<br>
  12. 这是滚动第7行<br>
  13. 这是滚动第8行<br>
  14. </div>
  15. <div id=demo2></div>
  16. </div>
  17. <script>
  18. var speed=30
  19. demo2.innerHTML=demo1.innerHTML
  20. function Marquee()
  21. {
  22. if(demo2.offsetTop-demo.scrollTop<=0)
  23. demo.scrollTop-=demo1.offsetHeight
  24. else
  25. {
  26. demo.scrollTop++
  27. }
  28. }
  29. var MyMar=setInterval(Marquee,speed)
  30. demo.onmouseover=function() {clearInterval(MyMar)}
  31. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  32. </script>
复制代码

seo



上一篇：求视频展厅内置数据
下一篇：下载搜街评店模板，但是不知道该怎么应用，求诸葛哥指教

相关帖子
回复

举报

authicon 亘古つ守侯珊 发表于 2011-12-7 08:44:33 | 显示全部楼层
最好能给个演示地址 看下效果！


看帖回帖是种美德！
           强势围观~~  
                围观无罪！   
回复

举报

authicon  楼主| dly 发表于 2011-12-7 09:31:33 | 显示全部楼层
亘古つ守侯珊 发表于 2011-12-7 08:44
最好能给个演示地址 看下效果！

把代码保存成html文件，自己打开就能看到效果
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 07:25

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表