HTML跑马灯
引言
HTML提供了一种非常简单实现跑马灯效果的标签,Marquee标签,通过设置不同的属性,可以实现不同的跑马灯效果:
跑马灯的背景及背景
宽123 高77 背景色为#f5f5f5的滚动区域:
1 | <marquee direction="left" width="123" height="77" bgcolor="#f5f5f5" >这是一个宽123高77的跑马灯</marquee> |
跑马灯边距
hspace:水平边距 vspace:垂直边距
1 | <marquee direction="left" width="135" hspace="13" vspace="57" >这是一个跑马灯</marquee> |
跑马灯速度
scrollamount:数值越大,滚动速度越快 通常设为5-10
1 | <marquee scrollamount="7">这是一个速度为7的滚动</marquee> |
跑马灯方向
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 | <marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()">鼠标悬停时,停止滚动;鼠标离开时,继续滚动 |
评论