阅读更多
不知道各位 JavaScript 开发者有没有关注过 W3C 在中国的官方教学网站: http://www.w3school.com.cn/
此网站非常全面,并且内容也很完整丰富。不过今天不是广告时间,因为我发现了一个 FireFox, Chrome, IE, Safari 都能支持的某 HTML 标签,这个网站上竟然没有介绍!
那就是
,多么常用的文字滚动标签啊~接下来是我对此元素的分析结果,经考察公网上常见资料,已经很全了。
把 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() 重新开始滚动。
技巧
实际使用中如果想重复循环,但不想经历留白,可以通过动态追加一组相同内容块的方式解决此问题。
比如对于文字
1234567 ,应使用 alternate 方式开始,然后立刻转为 scroll 方式,并在这段文字后边追加内容,变成
1234567 1234567 。然后当自动滚动完 id="a" 的文字之后,删除原有 id="a" 这段文字,在 id="b" 那段文字后边再追加 id="a" 的新一段文本。以此能够实现文本永远滚不完的效果。