`

用SVG实现垂直滚动文本

    博客分类：
  • SVG
SVG文字效果滚动 
阅读更多

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

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

基本想法如下：

 

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

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

 

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

 

  • 必要的js对象封装，增强代码的可复用性
  • 鼠标移过时停止滚动
  • 管理一个文本数组，直接提供增加报警信息的方法。文本大于两条才启动滚动
  • 手动清除报警的按钮及相应的方法
0
顶
0
踩
分享到：
| 看《地球上的星星》，想起我的中学生活
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    (Static)控件实现滚动字幕

    3. **实现滚动效果**：有三种滚动方式：水平滚动、垂直滚动和正弦波形曲线滚动。水平滚动只需改变文本的x坐标；垂直滚动改变y坐标；正弦波形滚动则需要根据数学公式（如正弦函数）来调整文本的xy坐标，使其呈波浪状...

    基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效源码.zip

    该资源是一个基于jQuery、CSS3和HTML5技术实现的全屏垂直滚动切换的幻灯片特效源码。这种特效在现代网页设计中被广泛应用，能够为网站增添动态和交互性，提升用户体验。以下是对这个源码实现的关键知识点的详细解释...

    html5 svg一飞冲天火箭动画返回顶部特效

    为了实现这样的效果，我们需要使用JavaScript库，如jQuery或原生的Fetch API，来处理用户交互和页面滚动。JavaScript代码会绑定到按钮的点击事件上，当点击时启动火箭动画，并使用`window.scrollTo()`方法将页面滚动...

    flash滚动显示

    例如，使用`TextField.appendText()`方法添加文本，`scrollV`属性设置垂直滚动位置。 四、滚动效果实现 1. 自动滚动：可以设定定时器（Timer）来定期更新文本框内容，模拟自动滚动效果。ActionScript的`Timer`类...

    TAB-左侧滚动菜单

    我们可以使用CSS的`display`属性来设置这些元素的布局，例如，用`display: flex`实现灵活的布局，使菜单项在垂直方向上堆叠。 2. **定位与尺寸**：菜单通常需要固定在页面的某一侧，可以使用`position`属性（如`...

    第15章 CSS文本样式[上]

    8. **文本阴影**：`text-shadow`可以为文本添加阴影效果，包括水平偏移、垂直偏移、模糊半径和阴影颜色。 9. **响应式文本**：通过媒体查询（media queries），我们可以根据设备特性（如屏幕宽度）应用不同的文本...

    html5平安儿童手表页面滚动简约单页模板.zip.zip

    “简约单页”则暗示设计风格简洁，整个网站可能只包含一个页面，通过垂直滚动来浏览全部信息，这样的设计通常用于突出核心内容，提高用户体验。 【描述解析】 描述中的"html5平安儿童手表页面滚动简约单页模板.zip....

    CSSNotesForProfessionals.pdf

    3.7 使用line-height：通过调整行高，可以实现文本的垂直居中。 3.8 垂直对齐：使用三行代码即可实现垂直居中。 3.9 相对于其他元素的居中：可以设定一个元素相对于另一个元素的位置进行居中。 3.10 鬼影元素技术：...

    网页多种分页样式及CSS

    9. 自定义字体：使用自定义字体为分页按钮添加个性化的文本样式。 10. 简约风格：极简主义的分页设计，减少不必要的装饰，突出功能性。 11. 分页网格：将分页布局成网格形式，适用于内容分区较多的页面。 12. ...

    Inkscape教程.

    需要注意的是，虽然SVG是基于XML的，可以使用文本编辑器编辑，但Inkscape编辑器本身并不属于文本编辑器。 在操作过程中，Inkscape提供了撤销和重做功能，通过Ctrl+Z可以撤销最近的操作，而Shift+Ctrl+Z则可以恢复...

    html+css+js瀑布流效果

    瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示或者商品列表，其特点是元素在页面上自适应地垂直排列，每行的元素宽度不固定，但高度一致，形成一种类似瀑布倾泻而下的视觉效果。这种布局在...

    20个非常实用的CSS技巧

    9. CSS滑块实现：利用max-height和溢出隐藏属性，可以在不使用JavaScript的情况下创建滑块效果，实现元素内容的裁剪和滚动。 上述技巧不仅涵盖了基础的样式应用，还包括了对现代CSS技术的运用，如flexbox布局和CSS3...

    在线教育项目后端组件.zip

    PanThumb组件用于展示可以水平或垂直滚动的全景图片。在教育项目中，它可能应用于展示课程的全景视图，比如虚拟实验室环境，或者用于查看大型的教学材料，如地图或图表，使得用户可以平移和缩放以查看细节。 5. **...

    HTML入门经典(HTML,CSS以及其它HTML技巧汇总)

    "垂直滚动网站的最新消息.txt"可能探讨了网页滚动效果的实现，这可以通过CSS的`overflow`属性或JavaScript实现，例如创建滚动新闻条或轮播图。 "根据密码访问指定网页.txt"可能涉及到网页的权限控制，通常用服务器...

    CSS样式表类型、背景、区块、方框、边框、列表、定位和扩展项.pdf

    3. **区块**：区块样式主要影响文本的布局，包括单词间距、字母间距、垂直对齐和文本对齐。单词间距和字母间距用于调整英文字符间的距离；垂直对齐用于设定元素内容在垂直方向上的位置；文本对齐则决定文本在水平...

    CSS语法大全.pdf

    这些属性可以单独或组合使用，以实现丰富的页面布局和视觉效果。CSS还有许多其他特性，如边框、盒模型、选择器、布局模式（如Flexbox和Grid）、动画和过渡等，它们共同构成了强大的网页样式系统。学习和掌握CSS，...

    CSS样式参数大全.pdf

    `oblique`使文本倾斜，`italic`使用斜体字体，`normal`为默认值，保持文本直立。 - `line-height`: 设置行之间的垂直间距。可以使用数值、百分比、长度单位（如`px`, `em`）或者`normal`。 - `font-weight`: 设置...

    css属性详解

    - `direction`: 定义文本的书写方向，通常为`ltr`（从左到右）或`rtl`（从右到左），也可使用`inherit`。 - `line-height`: 设置行间距，可以是`normal`（默认值，根据字体设置合理行高）、数值（与当前字体尺寸...

    W3cSchool DIV+CSS2 参考手册.docx

    - `color`: 用于设置文本颜色，可使用颜色名、RGB、十六进制颜色码等。 - `direction`: 控制文本方向，通常设置为`ltr`（从左到右）或`rtl`（从右到左）。 - `letter-spacing`: 调整字符间的间距，值可以是长度...

Magicbox
Global site tag (gtag.js) - Google Analytics