實(shí)現(xiàn)跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實(shí)現(xiàn),，我們在需要出現(xiàn)跑馬燈效果的地方插入“<marquee>滾動(dòng)的文字</marquee>”語句,，它的效果如下所示：
適當(dāng)?shù)倪\(yùn)用<marquee>標(biāo)簽的參數(shù)，可以表現(xiàn)出不同的效果，請看下面的幾個(gè)例子：
1,、左右彈來彈去的跑馬燈
實(shí)現(xiàn)的方法就是在IE的標(biāo)簽上稍微多加了幾個(gè)參數(shù)產(chǎn)生了更加豐富的變化,。設(shè)置behavior=alternate表示雙向移動(dòng)，direction= left表示運(yùn)動(dòng)方向向左,。marquee的寬度可以使用絕對象素值,，例如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)的速度,。
?。场в谐?jí)鏈接的跑馬燈
實(shí)現(xiàn)的方法很簡單，把整個(gè)<marquee></marquee>語句包含在超鏈接中就行,，你看看下面的代碼就清楚了,。當(dāng)然你也可以把包含在<marquee></marquee>中的各條內(nèi)容分別加上不同的鏈接，這樣的跑馬燈就可用來發(fā)布滾動(dòng)新聞或是做站點(diǎn)導(dǎo)航了,。
如果你想給跑馬燈的文字加上顏色,，換用不同的字體（默認(rèn)是宋體，換體就要加代碼）,，只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了,，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色,，在“size=”后邊換上適合的字號(hào),，如果想讓字體加粗，就再加上<STRONG>,。
請看一下效果：
上面效果的代碼碼如下：
<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瀏覽器是看不到的噢,。
| 參數(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 |
跑馬燈文字加粗 |
你已經(jīng)看到,，盡管<marquee>參數(shù)不少，但畢竟不能實(shí)現(xiàn)復(fù)雜的和自定義的特殊跑馬燈效果,，而且還有瀏覽器限制,，所以我們更多情況下會(huì)采用JavaScript來實(shí)現(xiàn)跑馬燈。
|
較復(fù)雜的跑馬燈
|
|
這里向你介紹幾個(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)步驟:
(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()語句即可,。
2,、超鏈接的跑馬燈式提示信息
把你的“老鼠”移到下面鏈接上試一試，有什么不同呢,？原來彈出了一條跑馬燈式的提示信息,，這是怎么實(shí)現(xiàn)的呢，請接著看：
源碼粘貼框：
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)步驟：
(1)先在<body>標(biāo)簽下面插入一段JavaScript代碼,；
(2)然后在需要實(shí)現(xiàn)跑馬燈式提示信息效果的超鏈接中加入Onmouseover和Onmouseout語句。
|
|
