- 点击要插入滚动字幕的位置,选择:插入——>标签——>HTML——>marquee
- 选择插入,在代码区,把光标插入点放在 marquee标签内。
- 右侧使用“标签检查器”设置marquee标签的属性。
- 点击behavior设置项右边的下拉箭头,选择滚动字幕内容的运动方式
alternate | scroll | slide |
内容在相反两个方向滚来滚去 | 内容向同一个方向滚动 | 内容接触到字幕边框就停止滚动 |
- direction属性设置字幕内容的滚动方向
down | left | right | up |
向下运动 | 向左运动 | 向右运动 | 向上运动 |
如下:
- scrollamount属性设置字幕滚动的速度。(直接输入数值1,2,3,4..........)
- scrolldelay属性设置字幕内容滚动时停顿的时间,单位为毫秒。如果要让滚动看起来流畅,数值应该尽量小。如果要有步进的感觉,就设置时间长一点吧。
- width属性设置滚动字幕的宽度。(直接输入数值)
- style属性设置字幕内容的样式。实例中设置字幕文字大小,输入了“font:12px;”。
- loop属性设置字幕内容滚动次数,默认值为无限。“-1”也为无限。
切换到行为
onMouseOver事件设置鼠标移动到滚动字幕时的动作,常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作,常设置为开始滚动。
事件 | onMouseOver | onMouseOut |
动作 | this.stop(); | this.start(); |
代码如下:
<body onmouseover="this.stop()" onmouseout="this.start()"><marquee behavior="scroll" direction="left" width="100" loop="-1" scrollamount="2" scrolldelay="2" style="front:12px;">这是一个滚动字幕</marquee>