用javascript代替marquee的滚动字幕效果代码

由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marquee标签的朋友,不妨先阅读一下 这篇文章。
第一种方法:用javascript模拟marquee的做法。
出处: 网易游戏
热点新闻

滚动新闻


[Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行]

个人观点:从web可用性角度上讲,我们在采用这段代码的同时要考虑到noscript环境下的可用性,建议将内容还是以下边代码的形式出现在页面中。如:
复制代码 代码如下:



  • 用“梦幻密保”快速取回帐号密码

  • 网易将军令官方网站

  • 最新壁纸下载

  • 最新屏保下载




然后用脚本去设置隐藏,将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。
第二种方法:这个更强,能自动根据内容自动进行左右滚动,解决了宽度太小造成的截取问题。
原文作者: 风动人
SCROLL
温岚 - 屋顶(周杰伦 对唱版)
范玮琪 - 那些花儿
张韶涵 - 娃娃
孙楠&韩红 - 美丽的神话

[Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行]

个人观点:从xhtml的语义化的角度看,页面内容中滥用div标签现象比较严重,可改成ul/li形式。

第三种是最精简的,代码非常少。
原文作者: cityvoice
New Document
[Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行]

个人观点:太短小精干了,如果你喜欢简单的话,这个也可以考虑的。 

你可能感兴趣的:(用javascript代替marquee的滚动字幕效果代码)