文本滚动元素 marquee 研究报告

不知道各位 JavaScript 开发者有没有关注过 W3C 在中国的官方教学网站： http://www.w3school.com.cn/
此网站非常全面，并且内容也很完整丰富。不过今天不是广告时间，因为我发现了一个 FireFox, Chrome, IE, Safari 都能支持的某 HTML 标签，这个网站上竟然没有介绍！

那就是 <marquee>，多么常用的文字滚动标签啊～接下来是我对此元素的分析结果，经考察公网上常见资料，已经很全了。
把 marquee 元素放入 FireBug 中观察，可以看到如下几个比较特别的属性和方法。

标签属性
behavior    滚动方式，有三种支持的值。
    ="scroll"    按指定方向从空白开始滚动。一次滚动完毕后会追加空白，直至内容完全滚掉，然后从头开始第二次滚动，往复。
    ="slide"    按指定方向从空白开始滚动一次并停止
    ="alternate"    按指定方向滚动到头后转为反向滚动，二种方向交替

direction    滚动方向，有二种支持的值。
    ="left"        从右往左滚动
    ="right"    从左往右滚动

loop        循环次数，必须为数字。此属性能令 behavior="slide" 的滚动成为多次。

scrollAmount    滚动每次跳动的像素。默认值各个浏览器似乎不一样。

scrollDelay    滚动每跳间隔的毫秒数。默认值各个浏览器似乎不一样。


自有事件句柄
onBounce（事件方法为onbounce）    转向事件，只在 behavior="alternate" 条件下才会激发。
onFinish（事件方法为onfinish）    完成事件。指定 loop 或者 behavior="slide" 条件下会激发。
onStart（事件方法为onstart）    开始事件。


内置方法
click()    含义尚未可知……真抱歉了……
init()    初始化方法，但目前看来 Chrome, IE 和 Safari  认为不具有此方法；FireFox 自己也无效果。
start()    启动方法，可以启动自身停止滚动的对象。
stop()    停止方法，停止自身滚动。停止的滚动对象可以通过 .start() 重新开始滚动。



技巧

实际使用中如果想重复循环，但不想经历留白，可以通过动态追加一组相同内容块的方式解决此问题。
比如对于文字 <span id="a">1234567</span> ，应使用 alternate 方式开始，然后立刻转为 scroll 方式，并在这段文字后边追加内容，变成 <span id="a">1234567</span> <span id="b">1234567</span> 。然后当自动滚动完 id="a" 的文字之后，删除原有 id="a" 这段文字，在 id="b" 那段文字后边再追加 id="a" 的新一段文本。以此能够实现文本永远滚不完的效果。

转载于:https://www.cnblogs.com/springside6/archive/2012/05/29/2525084.html