用SVG实现垂直滚动文本
2015-12-12 00:00
330 查看
昨天和同事探讨实现一个实时监控图(采用SVG)的报警信息显示,最后认定采用垂直滚动的信息最合理——信息量大,醒目,省地(想起北京的房价了,监控图也是寸土寸金阿)。
普通网页用javascript实现这个效果有很多很好的例子,但搜索了一下,还真没有现成的SVG例子。于是就自己写了一个最简单的demo供同事借鉴。
基本想法如下:
利用SVG提供的clipPath,实现对两行文本的部分显示的裁剪
一个定时器用于本次滚动停止到下次滚动开始间隙的计时
另一个定时器用于滚动过程中,每次细微的文本位置调整的计时
运行大致效率:在我的sony SR5s2上(windows7 64bit pro, firefox4),cpu在滚动时增加了5%左右
实现的效果及代码参见附件,要改进形成正式功能,可以作以下几点工作:
必要的js对象封装,增强代码的可复用性
鼠标移过时停止滚动
管理一个文本数组,直接提供增加报警信息的方法。文本大于两条才启动滚动
手动清除报警的按钮及相应的方法
普通网页用javascript实现这个效果有很多很好的例子,但搜索了一下,还真没有现成的SVG例子。于是就自己写了一个最简单的demo供同事借鉴。
基本想法如下:
利用SVG提供的clipPath,实现对两行文本的部分显示的裁剪
一个定时器用于本次滚动停止到下次滚动开始间隙的计时
另一个定时器用于滚动过程中,每次细微的文本位置调整的计时
运行大致效率:在我的sony SR5s2上(windows7 64bit pro, firefox4),cpu在滚动时增加了5%左右
实现的效果及代码参见附件,要改进形成正式功能,可以作以下几点工作:
必要的js对象封装,增强代码的可复用性
鼠标移过时停止滚动
管理一个文本数组,直接提供增加报警信息的方法。文本大于两条才启动滚动
手动清除报警的按钮及相应的方法
相关文章推荐
- 用PS实现纹理浮雕效果代码
- 用CSS实现的一张图完成的按钮效果
- 基于jquery实现一个滚动的分步注册向导-附源码
- 让电脑右下角显示你想要文字
- 让超出DIV宽度范围的文字自动显示省略号...
- css利用A标签的背景可能作出很有意思的效果第1/2页
- 使用CSS不用程序实现文字自动截断 用省略号代替
- 超级经典一套鼠标控制左右滚动图片带自动翻滚
- 可左右平滑滚动的产品展示效果
- WinForm实现仿视频播放器左下角滚动新闻效果的方法
- 使用GD库生成带阴影文字的图片
- C#获取关键字附近文字算法实例
- asp.net下GDI+的一些常用应用(水印,文字,圆角处理)技巧
- 图片与文字半透明效果 鼠标移上不透明
- javascript 网页上跳动的文字
- JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
- JS实现来回出现文字的状态栏特效代码
- JS实现文字掉落效果的方法
- JavaScript控制网页平滑滚动到指定元素位置的方法
- 百度空间的popup效果分析第1/3页