HTML跑马灯

引言

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

跑马灯的背景及背景

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

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

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

跑马灯边距

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

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

这是一个跑马灯

跑马灯速度

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

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

这是一个速度为7的滚动

跑马灯方向

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

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

向右滚动

跑马灯循环

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

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

这是一个循环三次滚动

跑马灯滚动方式

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

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

这是一个跑马灯

跑马灯延迟

scrolldelay： 数值值越大，滚动速度越慢，通常不设置

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

这是一个跑马灯

滚动事件

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

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

鼠标悬停时，停止滚动；鼠标离开时，继续滚动