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>

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

<meta http-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); } } var timer = 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; case 3: 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><a href="http://www.div-css.com/">Web标准化</a></li> <li><a href="http://www.div-css.com/html/standard/">Web标准化 XHTML CSS</a></li> <li><a href="Ajax/Javascripthttp://www.div-css.com/html/x1/">Ajax/Javascript</a></li> <li><a href="http://www.div-css.com/html/web_design/">页面设计</a></li& gt; <li><a href="http://www.div-css.com/html/Web_develop/">网站开发</a>< /li> <li><a href="http://www.div-css.com/html/database/">数据库</a></li> <li><a href="http://www.div-css.com/html/server/">服务器</a></li> <li><a href="http://bbs.div-css.com/">论坛</a></li> </ul> </div> <script type="text/javascript"> new Marquee("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>向下Contact us</a></li> </ul> </div> <script type="text/javascript"> new Marquee("m0",1,1,258,60,50,0,0); </script> <!-- 例子2 ]] --> <!-- 例子3 向左滚动 [[ --> <div id="m1" style="white-space:nowrap;">想向左就向左<<<<<想向左就向左<<& lt;<<想向左就向左<<<<<。。。</div> <script type="text/javascript"> new Marquee("m1",2,1,258,60,50,0,0); </script> <!-- 例子3 ]] --> <!-- 例子4 向右滚动 [[ --> <div id="m2" style="white-space:nowrap;">想向右就向右>>>>>想向右就向右>>& gt;>>想向右就向右>>>>>。。。。</div> <script type="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功能：

/*
*parameter:el--marqueeelement
*
*htmlstructure:
*<div...>
*<marquee...>
*<tablewidth="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 ;
}
}

/*
*checkisfirefox2.x
*/
if (/Firefox[///s](/d+/./d+)/.test(navigator.userAgent)){
 var ffversion= new Number(RegExp.$1) //capturex.xportionandstoreasanumber
 if (ffversion>=2&&ffversion<=3){
 var els=document.getElementsByTagName( "marquee" );
 for ( var i=0;i<els.length;i++)
 new Marquee(els[i]);
}
}

/*
 * 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代码：

...
</ marquee >
< 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>之间的内容替换为图像或其它对象等