欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用SVG实现垂直滚动文本

程序员文章站 2022-07-08 23:02:32
...

昨天和同事探讨实现一个实时监控图(采用SVG)的报警信息显示,最后认定采用垂直滚动的信息最合理——信息量大,醒目,省地(想起北京的房价了,监控图也是寸土寸金阿)。

普通网页用javascript实现这个效果有很多很好的例子,但搜索了一下,还真没有现成的SVG例子。于是就自己写了一个最简单的demo供同事借鉴。

基本想法如下:

 

  • 利用SVG提供的clipPath,实现对两行文本的部分显示的裁剪
  • 一个定时器用于本次滚动停止到下次滚动开始间隙的计时
  • 另一个定时器用于滚动过程中,每次细微的文本位置调整的计时

运行大致效率:在我的sony SR5s2上(windows7 64bit pro, firefox4),cpu在滚动时增加了5%左右

 

实现的效果及代码参见附件,要改进形成正式功能,可以作以下几点工作:

 

  • 必要的js对象封装,增强代码的可复用性
  • 鼠标移过时停止滚动
  • 管理一个文本数组,直接提供增加报警信息的方法。文本大于两条才启动滚动
  • 手动清除报警的按钮及相应的方法