網頁跑馬燈效果，標籤
適當的運用<marquee>標籤的引數，可以表現出不同的效果，請看下面的幾個例子：
1、左右彈來彈去的跑馬燈
實現的方法就是在IE的標籤上稍微多加了幾個引數產生了更加豐富的變化。設定behavior=alternate表示雙向移動，direction= left表示運動方向向左。marquee的寬度可以使用絕物件素值，例如width=200等這個值限定了跑馬燈滾動的範圍。需要說明的是該效果在
Netscape下是看不到的。
原始碼貼上框：
<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>
２、跑的很快的跑馬燈
只要在<marquee>標籤後面加上“scrollamount=15”即可,修改=後邊的數字引數即可限制文字移動的速度。
３、帶有超級連結的跑馬燈
實現的方法很簡單，把整個<marquee></marquee>語句包含在超連結中就行，你看看下面的程式碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內容分別加上不同的連結，這樣的跑馬燈就可用來發布滾動新聞或是做站點導航了。
如果你想給跑馬燈的文字加上顏色，換用不同的字型（預設是宋體，換體就要加程式碼），只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了，你可在“face=”後邊換上你喜歡的字型，在“color=”後邊換上你喜歡的字顏色，在“size=”後邊換上適合的字號，如果想讓字型加粗，就再加上<STRONG>。
上面效果的程式碼碼如下：
<marquee width=400 scrollamount=2> <a href=http://954872988.qzone.qq.com/><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超連結的跑馬燈!點我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試？</FONT></STRONG></a> </marquee>
以上幾個例子都是<marquee>標籤引數的應用，下面把所有可以利用的引數列在表中供你參考，不過還是要提醒你，<marquee>標籤只被IE所支援，使用Netscape瀏覽器是看不到的噢。
| 引數 | 用法介紹 |
| behavior=scroll, slide, alternate | 跑馬方式：迴圈繞行，只跑一次就停住，來回往復運動 |
| direction=left,right | 跑馬方向：從左向右，從右向左 |
| loop=100 | 跑馬次數：迴圈100次，如不寫預設為一直迴圈 |
| width=100%,height=200 | 跑馬範圍：寬為100%，高為200畫素 |
| scrollamount=20 | 跑馬速度：數越大越快 |
| scrolldelay=500 | 跑馬延時：毫秒數，利用它可實現躍進式滾動 |
| hspace=20，vspace=20 | 跑馬區域與其它區域間的空白大小 |
| bgcolor=#00FFCC | 跑馬區域的背景顏色 |
| face=楷體_GB2312 | 跑馬燈文字字型 |
| color=#ff0000 | 跑馬燈文字顏色 |
| size=3 | 跑馬燈文字字號 |
| STRONG | 跑馬燈文字加粗 |
你已經看到，儘管<marquee>引數不少，但畢竟不能實現複雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會採用JavaScript來實現跑馬燈。
| 較複雜的跑馬燈 |
|
這裡向你介紹幾個用JavaScript實現的較複雜的跑馬燈，你只須把原始碼貼上框中的程式碼按照說明覆制的指定的位置就能看到跑馬燈的效果。 1、狀態列中的跑馬燈 在預設狀態下瀏覽器的狀態列中顯示的是連結指向資訊，給人的感覺很單調。如果我們把問候語或是站點的介紹放在狀態列中滾動顯示，一定能取得很好的效果。 原始碼貼上框： 1、 將以下程式碼放在<head>與</head>之間： <script LANGUAGE="JavaScript"> <!-- Begin var Mes=new Array(); Mes[0]="洪恩線上歡迎你！ "; Mes[1]="感謝你關注電腦互動教程 "; Mes[2]="網頁製作技巧 之 跑馬燈大全 "; 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>標籤內加入onload 語句： <body onload="scroll();"> 實現步驟: 2、超連結的跑馬燈式提示資訊 把你的“老鼠”移到下面連結上試一試，有什麼不同呢？原來彈出了一條跑馬燈式的提示資訊，這是怎麼實現的呢，請接著看： 原始碼貼上框： 1. 將下面程式碼放在<body>標籤下： <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.然後在要出現提示資訊的連結中，新增onMouseover語句： <a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee實現的各式跑馬燈')" onMouseout="hidetip2()">跑馬燈大全(一)</a> <a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的電腦互動教程')" onMouseout="hidetip2()">電腦互動教程</a> <a href="pmjq00.htm" onMouseover="showtip2(this,event,'點滴技巧裝扮你的家')" onMouseout="hidetip2()">網頁製作技巧技巧</a> 實現步驟： (2)然後在需要實現跑馬燈式提示資訊效果的超連結中加入Onmouseover和Onmouseout語句。 |