用SVG实现垂直滚动文本
昨天和同事探讨实现一个实时监控图(采用SVG)的报警信息显示,最后认定采用垂直滚动的信息最合理——信息量大,醒目,省地(想起北京的房价了,监控图也是寸土寸金阿)。
普通网页用javascript实现这个效果有很多很好的例子,但搜索了一下,还真没有现成的SVG例子。于是就自己写了一个最简单的demo供同事借鉴。
基本想法如下:
?
利用SVG提供的clipPath,实现对两行文本的部分显示的裁剪一个定时器用于本次滚动停止到下次滚动开始间隙的计时另一个定时器用于滚动过程中,每次细微的文本位置调整的计时?
实现的效果及代码参见附件,要改进形成正式功能,可以作以下几点工作:
?
必要的js对象封装,增强代码的可复用性鼠标移过时停止滚动管理一个文本数组,直接提供增加报警信息的方法。文本大于两条才启动滚动手动清除报警的按钮及相应的方法