marquee命令的基本用法

最新推荐文章于 2024-03-16 12:08:35 发布

weixin_34302561

最新推荐文章于 2024-03-16 12:08:35 发布

阅读量209

点赞数

本文介绍了 HTML 中 Marquee 命令的基本用法及其各种属性设置，包括文字移动的方向、方式、循环次数、速度等，并提供了无缝连接循环滚动的两种实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

marquee命令的基本用法

基本语法
<marquee> ... </marquee>
文字移动属性的设置
方向
<direction=#> #=left, right <marquee direction=left>从右向左移！</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>

循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走
3 趟</marquee>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！
</marquee>

外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>

面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
　
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>
<marquee direction=up>我在向上走！</marquee>
<marquee direction=down>我又下向走了</marquee>
补充一个无缝连接的循环滚动

<html>
<head>
</head>
<body>
<TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>
         <SCRIPT language=JavaScript>
for(t=1;t<=1000;t++)
document.write("11111111111112222222222222222233333333333333")


</SCRIPT>
         </MARQUEE></TD>
</body>
</html>
另一种实现无缝连接循环滚动得方法
<div id=demo style=overflow:hidden;height:100px width:100px>
<div id=demo1>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank">nudeangel_2</a>
<a href="#" target="_blank">nudeangel_3</a>
<a href="#" target="_blank">nudeangel_4</a>
<a href="#" target="_blank">nudeangel_5</a>
<a href="#" target="_blank">inudeangel_6</a>
<a href="#" target="_blank">nudeangel_7</a>
</div>
<div id=demo2></div>
</div>
<script>
var t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function nudeangelMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var repeat=setInterval(nudeangelMarquee,50);
demo.onmouseover=function() {clearInterval(repeat);}
demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}
</script>

ondragstart="window.event.returnvalue=false" oncontextmenu="window.event.returnvalue=false" onselectstart="event.returnvalue=false