文本滚动元素 marquee 研究报告

回眸只為那壹抹淺笑 提交于 2019-12-03 20:11:20
本文我在 CSDN 也发表过,地址是: http://blog.csdn.net/shanelooli/article/details/7611942
同样,在 ITeye 也发表过,地址是: http://surmounting.iteye.com/admin/blogs/1543868

不知道各位 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" 的新一段文本。以此能够实现文本永远滚不完的效果。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!