用SVG实现垂直滚动文本

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

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

基本想法如下:

 

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

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

 

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

 

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

你可能感兴趣的:(svg,文字,滚动,效果)