Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。
格式：
<MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>…
</MARQUEE>
属性：
ALIGN：用于按设定的值对齐滚动的文本。ALIGN可以设定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。此属性不是必须使用的。
例：
<MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>
BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定为ALTERNATE，则文本从一边移动到另一边。如果设定为SCROLL，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：SILIDE，ALTERNATE，SCROLL。
例：
<MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>
BGCOLOR：用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。
例：
<MARQUEE BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>
<MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>
DIRECTION：用于设定文本滚动的方向，可以设定的值有：LEFT，RIGHT。此属性不是必须使用的。
例：
<MARQUEE DIRECTION="LEFT">文字向左边滚动</MARQUEE>
<MARQUEE DIRECTION="RIGHT">文字向右边滚动</MARQUEE>
HEIGHT：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例：
<MARQUEE HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>
<MARQUEE HEIGHT="12">滚动字幕的高度是12像素</MARQUEE>
WIDTH：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。
例：
<MARQUEE WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>
<MARQUEE WIDTH="200">滚动字幕的宽度是200像素</MARQUEE>
HSPACE：用于设定滚动字幕左右的空白空间，空白空间用像素表示。此属性不是必须使用的。
例：
<MARQUEE HSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE>
VSPACE：用于设定滚动字幕上下的空白空间，空白空间用像素表示。此属性不是必须使用的。
例：
<MARQUEE VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>
LOOP：用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时，则文字会无限制地滚动。此属性不是必须使用的。
例：
<MARQUEE LOOP="-1">文字滚动无数次</MARQUEE>
<MARQUEE LOOP="5">文字滚动5次</MARQUEE>
SCROLLAMOUNT：用于设定每个连续滚动文本后面的间隔，该间隔用像素表示。此属性不是必须使用的。
例：
<MARQUEE SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>
SCROLLDELAY：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。此属性不是必须使用的。
例：
<MARQUEE SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE>
ONMOUSEOUT=this.start() ：用来设置鼠标移出该区域时继续滚动
ONMOUSEOVER=this.stop()：用来设置鼠标移入该区域时停止滚动
javascript实现连续滚动
以下是代码：
<DIV id=demo style="overflow:hidden;height :200px;width :95px;background-color:white;color:#ffffff;
border-width :1px 1px 1px 1px;border-style :dotted dotted dotted dotted;border-color :black black black black;" align=center>
<DIV id=demo1>
<!-- 定义图片 -->
<IMG src=http://www.cnbruce.com/images/logo.gif>
<IMG src=http://www.yzpc.net/imageser/toplogo.gif>
<IMG src=http://www.blueidea.com/img/common/logo.gif>
<IMG src=http://www.linkmeng.com/IconCode/LinkMeng_Logo.gif>
<IMG src=http://www.0594design.com/link/images/mylogo.gif>
<IMG src=http://www.it365cn.com/images/logo_1.gif>
<IMG src=http://www.it365cn.com/images/logo/lemongtree.gif>
<IMG src=http://www.it365cn.com/images/logo/flashempire.gif>
</DIV>
<DIV id=demo2></DIV>
</DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>
[Ctrl+A 全选 Ctrl+C 复制]
经典论坛的消息滚动
以下是代码：
<script>
var marqueeContent=new Array(); //定义一个数组，用来存放显示内容
marqueeContent[0]='<A href="#" onclick="reinitMarquee()">刷新最新列表</FONT></A>';
marqueeContent[1]='<a href=http://www.blueidea.com/updatelist.asp target=_blank>站点最新更新六十条</a>';
marqueeContent[2]='<A href=http://www.blueidea.com/tech/graph/2003/875.asp target=_blank>羽毛效果制作教程</a>';
marqueeContent[3]='<A href=http://www.blueidea.com/tech/program/2003/831.asp target=_blank>MySQL＆ASP</a>';
marqueeContent[4]='<A href=http://www.blueidea.com/tech/web/2003/874.asp target=_blank>初步了解CSS3</a>';
marqueeContent[5]='<A href=http://www.blueidea.com/tech/graph/2003/864.asp target=_blank>Fireworks MX 2004执行面版操作</a>';
marqueeContent[6]='<A href=http://www.blueidea.com/tech/graph/2003/872.asp target=_blank>Fireworks MX 2004等高渐变填充</a>';
marqueeContent[7]='<A href=http://www.blueidea.com/photo/gallery/2003/873.asp target=_blank>瓶子里的花</a>';
marqueeContent[8]='<A href=http://www.blueidea.com/tech/graph/2003/871.asp target=_blank>Fireworks MX 实现选项卡式效果</a>';
marqueeContent[9]='<A href=http://www.blueidea.com/photo/gallery/2003/870.asp target=_blank>情侣：黑白的爱情空气</a>';
marqueeContent[10]='<A href=http://www.blueidea.com/tech/graph/2003/866.asp target=_blank>制作 MAC 风格的苹果标志</a>';
marqueeContent[11]='<A href=http://www.blueidea.com/tech/graph/2003/868.asp target=_blank>蛋壳制作及破壳而出的人物合成</a>';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=4000;
var marqueeHeight=20; //滚动高度
//接下来的是定义一些要使用到的函数
Array.prototype.random=function() {
var a=this;
var l=a.length;
for(var i=0;i<l;i++) {
var r=Math.floor(Math.random()*(l-i));
a=a.slice(0,r).concat(a.slice(r+1)).concat(a[r]);
}
return a;
}
function initMarquee() {
marqueeContent=marqueeContent.random();
var str='';
for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId+=2;
if(marqueeContent.length>3)marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function reinitMarquee() {
js_scroll_content.src='scroll_content2.js';
marqueeContent=marqueeContent.random();
var str='';
for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?' ':'')+marqueeContent[i];
marqueeBox.childNodes[(marqueeBox.childNodes.length==1?0:1)].innerHTML=str;
marqueeId=2;
}
function startMarquee() {
var str='';
for(var i=0;(i<3)&&(marqueeId+i<marqueeContent.length);i++) {
str+=(i>0?' ':'')+marqueeContent[marqueeId+i];
}
marqueeId+=3;
if(marqueeId>marqueeContent.length)marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>
[Ctrl+A 全选 Ctrl+C 复制]
以下是代码：
<style type="text/css">
a {text-decoration: none;}
</style>
<script>
var marqueeContent=new Array(); //滚动新闻
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red">小泉称若自民党在议会选举中失败</a><br>';
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red">布什发表广播讲话</a><br>';
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red">伊斯兰武装炸毁印控克什米尔铁路导致列车出轨</a><br>';
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red">布雷默：即使抓住了萨达姆也难以结束抵抗行动</a><br>';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=18;
//接下来的是定义一些要使用到的函数
function initMarquee() {
var str=marqueeContent[0];
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>
[Ctrl+A 全选 Ctrl+C 复制]
以下是代码：
<script language="JavaScript" defer>
//code by windy_sk <[email protected]> 20040127
var obj_marquee = document.getElementById("marquee");
var marquee_spd = 4000;
var step_c = 0;
function marquee_init() {
var obj_unit = obj_marquee.firstChild;
var n = Math.ceil(parseInt(obj_marquee.style.height) / obj_unit.offsetHeight);
for(var i=0; i<n; i++) obj_marquee.appendChild(obj_unit.cloneNode(true));
return;
}
function marquee_show() {
var marquee_high = parseInt(obj_marquee.style.height);
var step = marquee_high/10;
if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
obj_marquee.scrollTop = 0;
marquee_show();
return;
}
obj_marquee.scrollTop += step;
if(step_c++ < 9) setTimeout("marquee_show()", 50);
return;
}
marquee_init();
setInterval("step_c=0;setTimeout('marquee_show()',50)", marquee_spd);
</script>
<table style="border:1px black solid;"><tr><td>
<div id="marquee" style="overflow:hidden;height:60px;width:210px;border:0px;padding:0px;">
<div style="border:0px;padding:0px">
<!-- Marquee Body Head -->
<div style="height:60px;width:210px;font-size:12px">
<a href="http://www.kdt.cn/kdt/introduce.php"><img src="http://www.blueidea.com/gg/kdt/206.gif" border="0" style="width:208px"></a>
这个是广告~~~~~~~~~
</div>
<div style="height:60px;width:210px;font-size:12px">
<a href="http://www.idc2008.com/index5.htm"><img src="http://www.blueidea.com/gg/idc2008/208X33.gif" border="0" style="width:208px"></a>
这个也是广告~~~~~~~~~~~~~~~~
</div>
<div style="height:60px;width:210px;font-size:12px">
<a href="http://www.qycity.com/"><img src="http://www.blueidea.com/gg/qycity/blueidea.gif" border="0" style="width:208px"></a>
这个怎么还是广告？？？？？？
</div>
<div style="height:60px;width:210px;font-size:12px">
<a href="http://www.blueidea.com/bbs/viewuser.asp?username=windy2000"><img src="http://www.blueidea.com/bbs/icon/user1.gif" border="0"> Windy2000</a><br>
也给自己做个广告~~~~~~~~~~
</div>
<!-- Marquee Body Bottom -->
</div>
</div>
</td></tr></table>
[Ctrl+A 全选 Ctrl+C 复制]
以下是代码：
<script language="JavaScript" defer>
//qswh's original and modifid by windy_sk <[email protected]> 20040120
function reportError(msg,url,line) {
var str = "You have found an error as below: \n\n";
str += "Err: " + msg + " on line: " + line;
alert(str);
return true;
}
window.onerror = reportError;
var obj_marquee = document.getElementById("marquee");
var repeat = null;
var marquee_spd = 50;
function marquee_init() {
var obj_unit = obj_marquee.firstChild;
var marquee_high = parseInt(obj_marquee.style.height);
var marquee_wide = parseInt(obj_marquee.style.width);
var unit_high = obj_unit.offsetHeight;
var unit_wide = obj_unit.offsetWidth;
var m = 0, n = 0, i = 0;
var tmp = null;
m = Math.ceil(marquee_wide / unit_wide);
n = Math.ceil(marquee_high / unit_high);
obj_unit.style.width = marquee_wide * (m+1);
obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width;
for(i=0; i<m; i++) {
tmp = obj_unit.rows[0].insertCell(-1);
tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML;
tmp.style.width = marquee_wide;
tmp = null;
}
for(i=0; i<n; i++) {
obj_marquee.appendChild(obj_unit.cloneNode(true));
}
return;
}
function marquee_show(direction) {
switch(direction) {
case "up":
if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight;
} else {
obj_marquee.scrollTop++;
}
break;
case "down":
if(obj_marquee.scrollTop <= 0) {
obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight;
} else {
obj_marquee.scrollTop--;
}
break;
case "left":
if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) {
obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
} else {
obj_marquee.scrollLeft++;
}
break;
case "right":
if(obj_marquee.scrollLeft <= 0) {
obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth;
} else {
obj_marquee.scrollLeft--;
}
break;
default:
break;
}
return;
}
function marquee_doit() {
var direction = "";
direction = obj_marquee.getAttribute("direction");
if(direction != null) marquee_show(direction);
direction = obj_marquee.getAttribute("direction2");
if(direction != null) marquee_show(direction);
return;
}
marquee_init();
repeat = setInterval("marquee_doit()",marquee_spd);
marquee.onmouseover = function() {clearInterval(repeat);}
marquee.onmouseout = function() {repeat=setInterval("marquee_doit()",marquee_spd);}
</script>
<table style="border:1px black solid;"><tr><td>
<div id="marquee" direction="up" style="overflow:hidden;height:200px;width:250px">
<table style="border:0px;padding:0px;"><tr><td>
<!-- Marquee Body Head -->
<a href="#" target="_blank">经典论坛</a><br>
<a href="#" target="_blank">163.com</a><br>
<a href="#" target="_blank">21cn.com</a><br>
<a href="#" target="_blank">Happy new year</a>
<!-- Marquee Body Bottom -->
</td></tr></table>
</div>
</td></tr></table>
Direction1:
<input type="button" value="↑" onclick="obj_marquee.direction='up'">
<input type="button" value="↓" onclick="obj_marquee.direction='down'">
<input type="button" value="←" onclick="obj_marquee.direction='left'">
<input type="button" value="→" onclick="obj_marquee.direction='right'">
<input type="button" value=" X " onclick="obj_marquee.direction=''"> <br>
Direction2:
<input type="button" value="↑" onclick="obj_marquee.direction2='up'">
<input type="button" value="↓" onclick="obj_marquee.direction2='down'">
<input type="button" value="←" onclick="obj_marquee.direction2='left'">
<input type="button" value="→" onclick="obj_marquee.direction2='right'">
<input type="button" value=" X " onclick="obj_marquee.direction2=''">
[Ctrl+A 全选 Ctrl+C 复制]
本文地址：http://com.8s8s.com/it/it30954.htm