·可以设置滚动滚动方向
·可以设置滚动速度
·图文支持
。。。
本文来自: PQ秀秀网(http://www.pqshow.com) 详细出处参考：http://www.pqshow.com/design/jiqiao/200909/10288.html
可惜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.οnmοuseοver=function() {clearInterval(MyMar1)} FGDemo.οnmοuseοut=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>
新作的项目里面有个页面用到了<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.οnmοuseοver= function (){pfun.pause()};
- el.οnmοuseοut= 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>之间的内容替换为图像或其它对象等
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
