繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 卡拉 OK 字幕效果
- Javascript
- Prototype ObjectRange对象学习
- Prototype Number对象 学习
- Prototype Enumerable对象 学习
- Prototype Template对象 学习
- Prototype PeriodicalExecuter对象 学习
- Prototype Array对象 学习
- Prototype Hash对象 学习
- [原创]IE view-source 无法查看看源码 JavaScript看网页源码
- js计算页面刷新的次数
- 一个cssQuery对象 javascript脚本实现代码
- 一个可以随意添加多个序列的tag函数
- javascript 三级下拉选择菜单Levels对象
- JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)
- javascript 表单规则集合对象
- 从基础开始建立一个JS代码库
- javascript Base类 包含基本的方法
- js 代码集(学习js的朋友可以看下)
- 模仿jQuery each函数的链式调用
- JavaScript 就地编辑HTML节点实现代码
- JavaScript 动态生成方法的例子
Javascript 中的 卡拉 OK 字幕效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 333 ::
收藏到网摘: n/a
卡拉 OK 中的字幕随着歌曲的进行会逐渐点亮，由于字幕不是一个一个地点亮而是逐渐过渡，所以我们在网页中实现该效果时，要通过两个层来实现，两个层的文字相同，颜色不同，底层不变，上层逐渐拉宽以遮盖下层，就实现了该效果，在 Flash 中实现这种效果时，也是本原理。本文给出基本示例，以求抛砖引玉。
重点是：两层的文字大小和行高相同，为第二个层设置合理的 position、top、overflow、width 样式属性和 nowrap HTML 属性。
注意，不同的浏览器可能因为对 CSS 的解释不同和缺乏某些属性支持，无法实现本效果，请在 IE 中察看示例。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
