Marquee的使用

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>

</DIV>

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>

............................................................................................................
经典论坛的消息滚动:

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>

............................................................................................................
轮流展示:

//code by windy_sk <windy_sk@126.com> 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>

这个是广告~~~~~~~~~

</div>

这个也是广告~~~~~~~~~~~~~~~~

</div>

这个怎么还是广告？？？？？？

</div>

<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>

</div>

</td></tr></table>

posted on 2007-08-03 16:51 冷月孤峰阅读(464) 评论(0) 收藏举报