MARQUEE 滚动效果,含有MARQUEE的页面在 在firefox下也能运行？！及不能运行的解决方法

修订 by jackpk：

20100524: 发现最新版本的firefox（3.6.3）对MARQUEE 滚动效果支持得很好，而我先前使用的firefox3.0版本就存在对MARQUEE 支持不好的问题。

MARQUEE 滚动效果

url:http://bbs.blueidea.com/thread-2850370-1-1.html

<script type="text/javascript"><!--document.write('<marquee behavior="scroll" onmouseout=start(); onmouseover=stop(); direction="left" scrollamount="2">');document.write('想吃烤红薯，但是不想吃街边上卖的那种，自己在家怎么用微波炉烤呢？想吃烤红薯，但是不想吃街边上卖的那种，自己在家怎么用微波炉烤呢？想吃烤红薯，但是不想吃街边上卖的那种，自己在家怎么用微波炉烤呢？想吃烤红薯，但是不想吃街边上卖的那种，自己在家怎么用微波炉烤呢？');document.write('</marquee>');--></script>  

·可以设置是否响应鼠标暂停
·可以设置滚动滚动方向
·可以设置滚动速度
·图文支持
    。。。

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"> div{border:1px solid#ccc;background:#eee;margin:10px;} </style> 说明：<ul><li>可以设置是否响应鼠标暂停</li> <li>可以设置滚动滚动方向</li><li>可以设置滚动速度</li> <li>图文支持</li><li>。。。</li> </ul> <hr /> <!-- 必须包含的js文件 [[--> <script type="text/javascript"> function Marquee() {this.ID = document.getElementById(arguments[0]); if(!this.ID) {alert("您要设置的/"" + arguments[0] + "/"初始化错误/r/n请检查标签ID设置是否正确!"); this.ID= -1; return; } this.Direction = this.Width = this.Height =this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop =this.MouseOver = 0; this.Step = 1; this.Timer = 30; this.DirectionArray= {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3};if(typeof arguments[1] == "number" || typeof arguments[1] =="string")this.Direction = arguments[1]; if(typeof arguments[2] =="number")this.Step = arguments[2]; if(typeof arguments[3] =="number")this.Width = arguments[3]; if(typeof arguments[4] =="number")this.Height = arguments[4]; if(typeof arguments[5] =="number")this.Timer = arguments[5]; if(typeof arguments[6] =="number")this.DelayTime = arguments[6]; if(typeof arguments[7] =="number")this.WaitTime = arguments[7]; if(typeof arguments[8] =="number")this.ScrollStep = arguments[8]; this.ID.style.overflow =this.ID.style.overflowX = this.ID.style.overflowY = "hidden";this.ID.noWrap = true; this.IsNotOpera =(navigator.userAgent.toLowerCase().indexOf("opera") == -1);if(arguments.length >= 7)this.Start(); } Marquee.prototype.Start =function() { if(this.ID == -1)return; if(this.WaitTime <800)this.WaitTime = 800; if(this.Timer < 20)this.Timer = 20;if(this.Width == 0)this.Width = parseInt(this.ID.style.width);if(this.Height == 0)this.Height = parseInt(this.ID.style.height);if(typeof this.Direction == "string")this.Direction =this.DirectionArray[this.Direction.toString().toLowerCase()];this.HalfWidth = Math.round(this.Width / 2); this.HalfHeight =Math.round(this.Height / 2); this.BakStep = this.Step;this.ID.style.width = this.Width + "px"; this.ID.style.height =this.Height + "px"; if(typeof this.ScrollStep !="number")this.ScrollStep = this.Direction > 1 ? this.Width :this.Height; var templateLeft = "MSCLASS_TEMP_HTML MSCLASS_TEMP_HTML";var templateTop = "MSCLASS_TEMP_HTML MSCLASS_TEMP_HTML"; var msobj =this; msobj.tempHTML = msobj.ID.innerHTML; if(msobj.Direction <= 1){ msobj.ID.innerHTML =templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } else {if(msobj.ScrollStep == 0 && msobj.DelayTime == 0) {msobj.ID.innerHTML += msobj.ID.innerHTML; } else { msobj.ID.innerHTML =templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } } vartimer = this.Timer; var delaytime = this.DelayTime; var waittime =this.WaitTime; msobj.StartID = function(){msobj.Scroll()}msobj.Continue = function() { if(msobj.MouseOver == 1) {setTimeout(msobj.Continue,delaytime); } else {clearInterval(msobj.TimerID); msobj.CTL = msobj.Stop = 0; msobj.TimerID= setInterval(msobj.StartID,timer); } } msobj.Pause = function() {msobj.Stop = 1; clearInterval(msobj.TimerID);setTimeout(msobj.Continue,delaytime); } msobj.Begin = function() {msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2: msobj.ID.scrollHeight / 2; if((msobj.Direction <= 1 &&msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction> 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) {msobj.ID.innerHTML = msobj.tempHTML; delete(msobj.tempHTML); return; }delete(msobj.tempHTML); msobj.TimerID =setInterval(msobj.StartID,timer); if(msobj.ScrollStep < 0)return;msobj.ID.onmousemove = function(event) { if(msobj.ScrollStep == 0&& msobj.Direction > 1) { var event = event || window.event;if(window.event) { if(msobj.IsNotOpera) { msobj.EventLeft = event.srcElement.id == msobj.ID.id ?event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft -msobj.ID.scrollLeft + event.offsetX; } else { msobj.ScrollStep = null;return; } } else { msobj.EventLeft = event.layerX -msobj.ID.scrollLeft; } msobj.Direction = msobj.EventLeft >msobj.HalfWidth ? 3 : 2; msobj.AbsCenter = Math.abs(msobj.HalfWidth -msobj.EventLeft); msobj.Step = Math.round(msobj.AbsCenter *(msobj.BakStep*2) / msobj.HalfWidth); } } msobj.ID.onmouseover =function() { if(msobj.ScrollStep == 0)return; msobj.MouseOver = 1;clearInterval(msobj.TimerID); } msobj.ID.onmouseout = function() {if(msobj.ScrollStep == 0) { if(msobj.Step == 0)msobj.Step = 1; return;} msobj.MouseOver = 0; if(msobj.Stop == 0) {clearInterval(msobj.TimerID); msobj.TimerID =setInterval(msobj.StartID,timer); } } }setTimeout(msobj.Begin,waittime); } Marquee.prototype.Scroll =function() { switch(this.Direction) { case 0: this.CTL += this.Step;if(this.CTL >= this.ScrollStep && this.DelayTime > 0) {this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;this.Pause(); return; } else { if(this.ID.scrollTop >=this.ClientScroll) { this.ID.scrollTop -= this.ClientScroll; }this.ID.scrollTop += this.Step; } break; case 1: this.CTL += this.Step;if(this.CTL >= this.ScrollStep && this.DelayTime > 0) {this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;this.Pause(); return; } else { if(this.ID.scrollTop <= 0) {this.ID.scrollTop += this.ClientScroll; } this.ID.scrollTop -=this.Step; } break; case 2: this.CTL += this.Step; if(this.CTL >=this.ScrollStep && this.DelayTime > 0) { this.ID.scrollLeft+= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } else{ if(this.ID.scrollLeft >= this.ClientScroll) { this.ID.scrollLeft-= this.ClientScroll; } this.ID.scrollLeft += this.Step; } break; case3: this.CTL += this.Step; if(this.CTL >= this.ScrollStep &&this.DelayTime > 0) { this.ID.scrollLeft -= this.ScrollStep +this.Step - this.CTL; this.Pause(); return; } else {if(this.ID.scrollLeft <= 0) { this.ID.scrollLeft +=this.ClientScroll; } this.ID.scrollLeft -= this.Step; } break; } }</script> <!-- 必须包含的js文件 ]] --> <!-- 例子1 向上滚动 [[ --><div id="m"> <ul> <li><ahref="http://www.div-css.com/">Web标准化</a></li><li><a href="http://www.div-css.com/html/standard/">Web标准化XHTML CSS</a></li> <li><ahref="Ajax/Javascripthttp://www.div-css.com/html/x1/">Ajax/Javascript</a></li><li><ahref="http://www.div-css.com/html/web_design/">页面设计</a></li&gt; <li><ahref="http://www.div-css.com/html/Web_develop/">网站开发</a></li> <li><ahref="http://www.div-css.com/html/database/">数据库</a></li><li><ahref="http://www.div-css.com/html/server/">服务器</a></li><li><ahref="http://bbs.div-css.com/">论坛</a></li> </ul></div> <script type="text/javascript"> newMarquee("m",0,1,258,60,50,0,0); </script> <!-- 例子1 [[ --><!-- 例子2 向下滚动 [[ --> <div id="m0"> <ul><li>向下Welcome</li> <li>向下About us</li><li>向下Services</li><li>向下Testimonials</a></li> <li>向下Contactus</a></li> </ul> </div> <scripttype="text/javascript"> new Marquee("m0",1,1,258,60,50,0,0);</script> <!-- 例子2 ]] --> <!-- 例子3 向左滚动 [[ --><div id="m1"style="white-space:nowrap;">想向左就向左<<<<<想向左就向左<<&lt;<<想向左就向左<<<<<。。。</div> <scripttype="text/javascript"> new Marquee("m1",2,1,258,60,50,0,0);</script> <!-- 例子3 ]] --> <!-- 例子4 向右滚动 [[ --><div id="m2"style="white-space:nowrap;">想向右就向右>>>>>想向右就向右>>&gt;>>想向右就向右>>>>>。。。。</div> <scripttype="text/javascript"> new Marquee("m2",3,1,258,60,50,0,0);</script> <!-- 例子4 ]] --> 

marquee在firefox下，时滚时不滚的解决方法
本文来自: PQ秀秀网(http://www.pqshow.com) 详细出处参考：http://www.pqshow.com/design/jiqiao/200909/10288.html

marquee是个好东西啊
可惜firefox对他的支持不够好

marquee在firfox下有时候滚动，有时候不滚动..
这是最令人头疼的事情
要不然不滚，要不然滚，这个问题可能就更容易解决

有很多js脚本可以模拟滚动

不过发现的最简单的办法是
把marquee的标签放在js里面。。。。。。。

<script language=javascript>
<!--
function marquee_start()
{
document.write("<marquee id='_dstid_MsgTitleMq' loop='-1' scrollamount='1' behavior='scroll' >")
}
function marquee_end()
{
document.write("</marquee>")
}
// -->
</script>
<script language=JavaScript>marquee_start();</script>
AaBbCc
<script language=JavaScript>marquee_end();</script>


遇到此类问题，可以这样解决看看。

测试：ie6/ie7/firefox


本文来自: PQ秀秀网(http://www.pqshow.com) 详细出处参考：http://www.pqshow.com/design/jiqiao/200909/10288.html

 

 

 

 

无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee
详细出处参考：http://www.jb51.net/article/10060.htm

 

<!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>Fifty Studio│无间断滚动的新闻文章列表</title> <link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" mce_href="tutorials/demo/css/main.css" /> <!--[if IE]><mce:style><!-- @import url("/tutorials/demo/css/ie.css"); --></mce:style><style mce_bogus="1"> @import url("/tutorials/demo/css/ie.css"); </style><![endif]--> <mce:style type="text/css"><!-- a{background:#FFF; color:#333;} a:hover{background:#FFF;color: #C00;} #demo ul{text-align: left; } #demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;} #FGWrapper{width: 400px; margin:2em auto; background:#EEE;} #demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;} #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;} #copyright{float: right;}--></mce:style><style type="text/css" mce_bogus="1"> a{background:#FFF; color:#333;} a:hover{background:#FFF;color: #C00;} #demo ul{text-align: left; } #demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;} #FGWrapper{width: 400px; margin:2em auto; background:#EEE;} #demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;} #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;} #copyright{float: right;}</style> <noscript> <mce:style type="text/css"><!-- #demo{overflow:auto; } } --></mce:style><style type="text/css" mce_bogus="1"> #demo{overflow:auto; } } </style> </noscript> </head> <body> <div id="ForestganWrap"> <div id="forestganHeader"> <a href="/" mce_href=""><img src="/img/logo.gif" mce_src="img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a> <h1>CSS 布局演示 CSS Layout by Forestgan</h1> <h2 id="demo_date">2006-11-1 发表</h2> </div> <div id="forestganMiddle"> <div id="FGWrapper"> <div id="demo"> <div id="demo1"> <ul> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=76" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=76" title="三列自适应宽度液态布局│Three Column Liquid Layouts">三列自适应宽度液态布局│Three Column Liquid Layouts </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=75" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=75" title="Internet Explorer 7 对CSS的兼容--Box Model Changes">Internet Explorer 7 对CSS的兼容--Box Model Changes </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">为不同的浏览器载入不同CSS的二种方法CSS Browser Selector </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" mce_href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li> </ul> </div> <div id="demo2"> </div> <mce:script type="text/javascript"><!-- //图片无间断滚动代码，兼容IE、Firefox、Opera //原脚本是IE only，来自网上，作者未知 //部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写 //http://www.forest53.com var speed=40; var FGDemo=document.getElementById('demo'); var FGDemo1=document.getElementById('demo1'); var FGDemo2=document.getElementById('demo2'); FGDemo2.innerHTML=FGDemo1.innerHTML function Marquee1(){ if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0) FGDemo.scrollTop-=FGDemo1.offsetHeight else{ FGDemo.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed) FGDemo.onmouseover=function() {clearInterval(MyMar1)} FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} // --></mce:script> </div> <div id="desc"><a href="http://www.forest53.com" mce_href="http://www.forest53.com"><span id="copyright">Design by Forestgan</span></a>文章列表无间断滚动演示</div> </div> </div> </div> <div id="forestganFooter"> <address> 演示页面设计制作： <a href="http://www.forest53.com" mce_href="http://www.forest53.com">Forestgan</a> 采用<a href="http://www.creativecommons.cn/" mce_href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途<a href="javascript:history.back()" mce_href="javascript:history.back()">返回前一页</a> </address> </div> </body> </html>

 

 

 

 

firefox 2 marquee兼容

url：http://cai555.javaeye.com/blog/260584

2008 - 10 - 31

新作的项目里面有个页面用到了<marquee>标签结果，在firefox下面就是不工作。无奈写了一段代码，用来替代简单的marquee功能：

 

Js代码

1. /*  
2.  * parameter: el -- marquee element  
3.  *   
4.  * html structure:  
5.  * <div ...>  
6.  *  <marquee ...>  
7.  *      <table width="770px"...>  
8.  */   
9. Marquee =  function (el){   
10.     el.parentNode.style.overflow =  "hidden" ;   
11.     el.parentNode.style.position =  "relative" ;   
12.        
13.      var  tab = el.getElementsByTagName( "table" )[0];   
14.     el.parentNode.appendChild(tab);   
15.     el.parentNode.removeChild(el);   
16.     el = tab;   
17.     el.style.position =  "absolute" ;   
18.     el.style.left =  "0px" ;   
19.        
20.     pfun =  this ;   
21.        
22.      this .pauseflag =  false ;   
23.     el.onmouseover =  function (){pfun.pause()};   
24.     el.onmouseout =  function (){pfun.resume()};   
25.        
26.      this .direction = -1;   
27.        
28.      this .timer = window.setInterval( function (){   
29.          if (!pfun.pauseflag){   
30.              var  left = parseInt(el.style.left);   
31.                
32.              /*  
33.              * table 里总共有10张图片一字排开，  
34.              * 长度770px,这里使用540px，  
35.              * 原因是考虑到最后3幅图片不能全部飞过，  
36.              * 否则会有一段间隙显示空白  
37.              */   
38.              if (left < 0 && left <= -540){   
39.                 pfun.direction = 1   
40.             } else   if (left >= 0){   
41.                 pfun.direction = -1;   
42.             }   
43.             el.style.left = (left + (5*pfun.direction))+ "px" ;   
44.         }   
45.     }, 200);   
46. }   
47.   
48. Marquee.prototype = {   
49.     pause :  function (){   
50.          this .pauseflag =  true ;   
51.     },   
52.        
53.     resume :  function (){   
54.          this .pauseflag =  false ;   
55.     }   
56. }   
57.   
58. /*  
59.  * check is firefox 2.x  
60.  */   
61. if  (/Firefox[///s](/d+/./d+)/.test(navigator.userAgent)){   
62.      var  ffversion= new  Number(RegExp.$1)  // capture x.x portion and store as a number   
63.       if  (ffversion>=2 && ffversion <= 3){   
64.           var  els = document.getElementsByTagName( "marquee" );   
65.           for ( var  i = 0 ; i < els.length; i++)   
66.               new  Marquee(els[i]);   
67.      }   
68. }  

/* * parameter: el -- marquee element *  * html structure: * <div ...> * <marquee ...> * <table width="770px"...> */Marquee = function(el){el.parentNode.style.overflow = "hidden";el.parentNode.style.position = "relative";var tab = el.getElementsByTagName("table")[0];el.parentNode.appendChild(tab);el.parentNode.removeChild(el);el = tab;el.style.position = "absolute";el.style.left = "0px";pfun = this;this.pauseflag = false;el.onmouseover = function(){pfun.pause()};el.onmouseout = function(){pfun.resume()};this.direction = -1;this.timer = window.setInterval(function(){if(!pfun.pauseflag){var left = parseInt(el.style.left);/* * table 里总共有10张图片一字排开， * 长度770px,这里使用540px， * 原因是考虑到最后3幅图片不能全部飞过， * 否则会有一段间隙显示空白 */if(left < 0 && left <= -540){pfun.direction = 1}else if(left >= 0){pfun.direction = -1;}el.style.left = (left + (5*pfun.direction))+"px";}}, 200);}Marquee.prototype = {pause : function(){this.pauseflag = true;},resume : function(){this.pauseflag = false;}}/* * check is firefox 2.x */if (/Firefox[///s](/d+/./d+)/.test(navigator.userAgent)){var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ffversion>=2 && ffversion <= 3){ var els = document.getElementsByTagName("marquee"); for(var i = 0 ; i < els.length; i++) new Marquee(els[i]); }}

 HTML代码：

Html代码

1. ...   
2. </ marquee >   
3. < script   type = "text/javascript"   src = "js/marquee.js" > </ script >   

...</marquee><script type="text/javascript" src="js/marquee.js"></script>

 

 

 

 

 

 

 

 

 

 

marquee 详解!

url：http://www.pqshow.com/design/jiqiao/200909/10289.html

 

首先让我们认识这个<marquee>标签，它是成对出现的标签，首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

behavior属性

behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是：如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee><marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> <marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
bgcolor属性文字滚动范围的背景颜色，参数值是16进制（形式：#AABBCC或#AA5566等）或预定义的颜色名字（如red、yellow、blue等）。如下所示：<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>


direction属性

  文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。如下所示：

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

<marquee direction="right">我向下滚动</marquee>

width和height属性

  width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度，height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的（宽或高）像素点数，百分数表示矩形所占浏览器窗口的（宽或高）百分比。如下所示：

  <marquee width="300" height="30" bgcolor="red">我宽300像素，高30像素。</marquee>
hspace和vspace属性

  这两个属性决定滚动矩形区域距周围的空白区域.

<marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>


<marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
loop属性

  loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示：

  <marquee loop="2">我滚动2次。</marquee>
<marquee loop="infinite">我无限循环滚动。</marquee>

<marquee loop="-1">我无限循环滚动。</marquee>

scrollamount和scrolldelay属性

  这两个属性决定文字滚动的速度（scrollamount）和延时（scrolldelay），参数值都是正整数。如下所示：

<marquee scrollamount="100">我速度很快.</marquee>

<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
最后说一下align属性，这个属性决定滚动文字位于距形内边框的上下左右位置。您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等