適當(dāng)?shù)倪\(yùn)用<marquee>標(biāo)簽的參數(shù),可以表現(xiàn)出不同的效果,請(qǐng)看下面的幾個(gè)例子:
1、左右彈來彈去的跑馬燈
實(shí)現(xiàn)的方法就是在IE的標(biāo)簽上稍微多加了幾個(gè)參數(shù)產(chǎn)生了更加豐富的變化。設(shè)置behavior=alternate表示雙向移動(dòng),direction= left表示運(yùn)動(dòng)方向向左。marquee的寬度可以使用絕對(duì)象素值,例如width=200等這個(gè)值限定了跑馬燈滾動(dòng)的范圍。需要說明的是該效果在 Netscape下是看不到的。
源碼粘貼框:
<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>
?。病⑴艿暮芸斓呐荞R燈
只要在<marquee>標(biāo)簽后面加上“scrollamount=15”即可,修改=后邊的數(shù)字參數(shù)即可限制文字移動(dòng)的速度。
3、帶有超級(jí)鏈接的跑馬燈
實(shí)現(xiàn)的方法很簡(jiǎn)單,把整個(gè)<marquee></marquee>語句包含在超鏈接中就行,你看看下面的代碼就清楚了。當(dāng)然你也可以把包含在<marquee></marquee>中的各條內(nèi)容分別加上不同的鏈接,這樣的跑馬燈就可用來發(fā)布滾動(dòng)新聞或是做站點(diǎn)導(dǎo)航了。 請(qǐng)看一下效果: 上面效果的代碼碼如下: <marquee width=400 scrollamount=2> <a href=http://954872988.qzone.qq.com/><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點(diǎn)我試試?</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點(diǎn)我試試?</FONT></STRONG></a> </marquee> 以上幾個(gè)例子都是<marquee>標(biāo)簽參數(shù)的應(yīng)用,下面把所有可以利用的參數(shù)列在表中供你參考,不過還是要提醒你,<marquee>標(biāo)簽只被IE所支持,使用Netscape瀏覽器是看不到的噢。 你已經(jīng)看到,盡管<marquee>參數(shù)不少,但畢竟不能實(shí)現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果,而且還有瀏覽器限制,所以我們更多情況下會(huì)采用JavaScript來實(shí)現(xiàn)跑馬燈。 這里向你介紹幾個(gè)用JavaScript實(shí)現(xiàn)的較復(fù)雜的跑馬燈,你只須把源碼粘貼框中的代碼按照說明復(fù)制的指定的位置就能看到跑馬燈的效果。 1、狀態(tài)欄中的跑馬燈 在默認(rèn)狀態(tài)下瀏覽器的狀態(tài)欄中顯示的是鏈接指向信息,給人的感覺很單調(diào)。如果我們把問候語或是站點(diǎn)的介紹放在狀態(tài)欄中滾動(dòng)顯示,一定能取得很好的效果。 源碼粘貼框: 1、 將以下代碼放在<head>與</head>之間: <script LANGUAGE="JavaScript"> <!-- Begin var Mes=new Array(); Mes[0]="洪恩在線歡迎你! "; Mes[1]="感謝你關(guān)注電腦交互教程 "; Mes[2]="網(wǎng)頁制作技巧 之 跑馬燈大全 "; var place=1; var i=0; function scroll() { window.status=Mes.substring(0, place); if (place >= Mes.length) { if(i<2) { i++; place=1; window.setTimeout("scroll()",50); } else { i=0; place=1; window.setTimeout("scroll()",50); } } else { place++; window.setTimeout("scroll()",50); } } // End --> </script> 2、在<body>標(biāo)簽內(nèi)加入onload 語句: <body onload="scroll();"> 實(shí)現(xiàn)步驟: 2、超鏈接的跑馬燈式提示信息 把你的“老鼠”移到下面鏈接上試一試,有什么不同呢?原來彈出了一條跑馬燈式的提示信息,這是怎么實(shí)現(xiàn)的呢,請(qǐng)接著看: 源碼粘貼框: 1. 將下面代碼放在<body>標(biāo)簽下: <script> if (!document.layers&&!docu****ll) event="test" function showtip2(current,e,text){ if (docu****ll&&document.readyState=="complete"){ docu****ll.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' docu****ll.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 docu****ll.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 docu****ll.tooltip2.style.visibility="visible" } else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (docu****ll) docu****ll.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } } function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 } </script> 2.然后在要出現(xiàn)提示信息的鏈接中,添加onMouseover語句: <a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee實(shí)現(xiàn)的各式跑馬燈')" onMouseout="hidetip2()">跑馬燈大全(一)</a> <a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的電腦交互教程')" onMouseout="hidetip2()">電腦交互教程</a> <a href="pmjq00.htm" onMouseover="showtip2(this,event,'點(diǎn)滴技巧裝扮你的家')" onMouseout="hidetip2()">網(wǎng)頁制作技巧技巧</a> 實(shí)現(xiàn)步驟: (2)然后在需要實(shí)現(xiàn)跑馬燈式提示信息效果的超鏈接中加入Onmouseover和Onmouseout語句。
如果你想給跑馬燈的文字加上顏色,換用不同的字體(默認(rèn)是宋體,換體就要加代碼),只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了,你可在“face=”后邊換上你喜歡的字體,在“color=”后邊換上你喜歡的字顏色,在“size=”后邊換上適合的字號(hào),如果想讓字體加粗,就再加上<STRONG>。
參數(shù) 用法介紹 behavior=scroll, slide, alternate 跑馬方式:循環(huán)繞行,只跑一次就停住,來回往復(fù)運(yùn)動(dòng) direction=left,right 跑馬方向:從左向右,從右向左 loop=100 跑馬次數(shù):循環(huán)100次,如不寫默認(rèn)為一直循環(huán) width=100%,height=200 跑馬范圍:寬為100%,高為200像素 scrollamount=20 跑馬速度:數(shù)越大越快 scrolldelay=500 跑馬延時(shí):毫秒數(shù),利用它可實(shí)現(xiàn)躍進(jìn)式滾動(dòng) hspace=20,vspace=20 跑馬區(qū)域與其它區(qū)域間的空白大小 bgcolor=#00FFCC 跑馬區(qū)域的背景顏色 face=楷體_GB2312 跑馬燈文字字體 color=#ff0000 跑馬燈文字顏色 size=3 跑馬燈文字字號(hào) STRONG 跑馬燈文字加粗
(1)首先將JavaScript代碼復(fù)制到<head>與</head>之間,這段代碼中包含了scroll()函數(shù),它 是實(shí)現(xiàn)跑馬燈的主體代碼。我們可以修改mes[]數(shù)組的值來改變跑馬燈的內(nèi)容,你也可以顯示更多條的信息,不過代碼中i的值應(yīng)等于信息的條數(shù),也就是等于 mes[]數(shù)組的維數(shù);
(2)然后在<body>標(biāo)簽中加入onload()語句即可。
(1)先在<body>標(biāo)簽下面插入一段JavaScript代碼;
聯(lián)系客服