分享
 
 
 

会移动的文字(Marquee)

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。

格式:

<MARQUEEALIGN="…"

BEHAVIOR="…"

BGCOLOR="…"

DIRECTION="…"

HEIGHT="…"

WIDTH="…"

HSPACE="…"

VSPACE="…"

LOOP="…"

SCROLLAMOUNT="…"

SCROLLDELAY="…"

ONMOUSEOUT=this.start()

ONMOUSEOVER=this.stop()

>…

</MARQUEE>

属性:

ALIGN:用于按设定的值对齐滚动的文本。ALIGN可以设定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此属性不是必须使用的。

例:

<MARQUEEALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>

BEHAVIOR:可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE,那么文本就移动到文档上,并停留在页边距上。如果设定为ALTERNATE,则文本从一边移动到另一边。如果设定为SCROLL,文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有:SILIDE,ALTERNATE,SCROLL。

例:

<MARQUEEBEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>

BGCOLOR:用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。

例:

<MARQUEEBGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>

<MARQUEEBGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>

<MARQUEEBGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>

DIRECTION:用于设定文本滚动的方向,可以设定的值有:LEFT,RIGHT。此属性不是必须使用的。

例:

<MARQUEEDIRECTION="LEFT">文字向左边滚动</MARQUEE>

<MARQUEEDIRECTION="RIGHT">文字向右边滚动</MARQUEE>

HEIGHT:用于设定滚动字幕的高度,高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。

例:

<MARQUEEHEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>

<MARQUEEHEIGHT="12">滚动字幕的高度是12像素</MARQUEE>

WIDTH:用于设定字幕的宽度,宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。

例:

<MARQUEEWIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>

<MARQUEEWIDTH="200">滚动字幕的宽度是200像素</MARQUEE>

HSPACE:用于设定滚动字幕左右的空白空间,空白空间用像素表示。此属性不是必须使用的。

例:

<MARQUEEHSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE>

VSPACE:用于设定滚动字幕上下的空白空间,空白空间用像素表示。此属性不是必须使用的。

例:

<MARQUEEVSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>

LOOP:用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时,则文字会无限制地滚动。此属性不是必须使用的。

例:

<MARQUEELOOP="-1">文字滚动无数次</MARQUEE>

<MARQUEELOOP="5">文字滚动5次</MARQUEE>

SCROLLAMOUNT:用于设定每个连续滚动文本后面的间隔,该间隔用像素表示。此属性不是必须使用的。

例:

<MARQUEESCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>

SCROLLDELAY:用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的。

例:

<MARQUEESCROLLDELAY="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 <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>

<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 <windy_sk@126.com> 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 复制]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有