引言

Html提供了一种非常简单实现跑马灯效果的标签,Marquee标签,通过设置不同的属性,可以实现不同的跑马灯效果:

跑马灯的背景及背景

宽123 高77 背景色为#f5f5f5的滚动区域:

1
<marquee direction="left" width="123" height="77" bgcolor="#f5f5f5" >这是一个宽123高77的跑马灯</marquee>

这是一个宽123高77的跑马灯

跑马灯边距

hspace:水平边距 vspace:垂直边距

1
<marquee direction="left" width="135" hspace="13" vspace="57" >这是一个跑马灯</marquee>

这是一个跑马灯

跑马灯速度

scrollamount:数值越大,滚动速度越快 通常设为5-10

1
<marquee scrollamount="7">这是一个速度为7的滚动</marquee>

这是一个速度为7的滚动

跑马灯方向

direction: 可设为 < up:向上 down:向下 left:向左 right:向右 > 默认为从右向左

1
<marquee direction="right">向右滚动</marquee>

向右滚动

跑马灯循环

loop:设置跑马灯循环次数;默认值为-1或infinite,表示无限循环滚动

1
<marquee loop="3">这是一个循环三次滚动</marquee>

这是一个循环三次滚动

跑马灯滚动方式

behavior:可设为< scroll:循环滚动 slide:只滚动一次 alternate:来回滚动 > 默认为循环滚动

1
<marquee behavior="alternate">这是一个跑马灯</marquee>

这是一个跑马灯

跑马灯延迟

scrolldelay: 数值值越大,滚动速度越慢,通常不设置

1
<marquee scrolldelay="77">这是一个跑马灯</marquee>

这是一个跑马灯

滚动事件

onmouseover:鼠标悬停事件
onmouseout:鼠标移开事件
this.stop():停止滚动
this.start():开始滚动

1
2
<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()">鼠标悬停时,停止滚动;鼠标离开时,继续滚动
</marquee>

鼠标悬停时,停止滚动;鼠标离开时,继续滚动