1、/ 53,1,第8章 網(wǎng)頁設(shè)計實用技術(shù)（2學(xué)時）,網(wǎng)頁特效是最常用的網(wǎng)頁實用技術(shù)之一，它是用程序代碼在網(wǎng)頁中實現(xiàn)特殊效果或者特殊功能的一種技術(shù)。它一般是用Java Scritp(Java腳本)來實現(xiàn)其特殊效果，通過客戶端的WEB瀏覽器來執(zhí)行。網(wǎng)頁特效有時也利用JAVA的APLET 來實現(xiàn)。 網(wǎng)頁特效一般分為：時間日期類、頁面背景類、頁面特效類、圖形圖象類、按鈕特效類、鼠標(biāo)事件類、Cookie腳本、文本特效類、狀態(tài)欄特效、代碼生成類、導(dǎo)航菜單類、頁面搜索類、在線測試類、密碼類、技巧類、綜合類、游戲類等等。 如果網(wǎng)頁特效使用得當(dāng)，往往能夠為網(wǎng)頁增添活潑的氣氛，起到事半功倍、畫龍點(diǎn)睛的作用。,/ 5

2、3,2,8.1 文字特效 8.1.1 跑馬燈文字 效 果: 多條文字信息在一行中逐條交替出現(xiàn)。,代碼提示：根據(jù)提示將代碼加入相應(yīng)的區(qū)域。 代 碼: 第一步: 將下面的代碼復(fù)制到與之間。 !- HTML comment to placate non JavaScript capable browsers var timerDM=null; var msgCnt = 5; / 設(shè)置信息的數(shù)目. var DisplayTime = 2000; / 間隔時間 var msgNum = 1; var Timeshow = DisplayTime; function araVob() var Displa

3、yLine = new araVob(); DisplayLine1 = 金色三峽; DisplayLine2 = 銀色大壩; DisplayLine3 = 綠色宜昌; DisplayLine4 = 特色學(xué)院;,/ 53,3,DisplayLine5 = 金色三峽 銀色大壩 綠色宜昌 特色學(xué)院; /* 只要修改上面的n，就可以增加信息數(shù) */ var msg = DisplayLine1; function DisplayMsg() document.msgform.message.value=msg; timerDM = setTimeout(DisplayMsg(),Timeshow);

4、ChangeMsg(); function ChangeMsg() msgNum+; if (msgCnt msgNum) msgNum = 1; msg = DisplayLinemsgNum; if (msgNum = 1) / change display time Timeshow = 3000; / of a specific message else Timeshow = DisplayTime; ,/ 53,4,function quitDisplay() document.msgform.message.value=Alternate! But dont scroll side

5、ways!; / - 第二步:把原改為,/ 53,5,8.1.2 變色的文字 效 果：顯示的文字逐字改變顏色 使用方法：將下面的代碼復(fù)制到與之間。 代 碼： ); else document.write(); ,/ 53,6,function changeCharColor() if (navigator.appName = Netscape) document.a.document.write(); for (var j = 0; j + Text.charAt(i) + ); else document.a.document.write(text.charAt(j); document.a

6、.document.write(); document.a.document.close(); if (navigator.appName = Microsoft Internet Explorer) str = ; for (var j = 0; j + text.charAt(i) + ; else str += text.charAt(j); str += ; a.innerHTML = str; (i = text.length) ? i=0 : i+; setInterval(changeCharColor(), speed); - - ,/ 53,7,8.1.3 在屏幕上不斷運(yùn)動反

7、彈的文字 效 果：顯示的文字是屏幕上移動，遇到邊框鏡像反彈后繼續(xù)移動。 代碼提示：將下面的代碼復(fù)制到與之間。 #supertext position:absolute; left:0; top:0; visibility:hide; visibility:hidden; var thecontent=歡迎光臨新浪網(wǎng) var hidetimer=; var BallSpeed = 10; var contentWidth; var contentHeight; var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos =

8、0; var xDir = right; var yDir = down;,/ 53,8,var superballRunning = true; var tempBallSpeed; var currentBallSrc; var newXDir; var newYDir; function initializeBall() if (document.all) xMax = document.body.clientWidth yMax = document.body.clientHeight document.all(supertext).style.visibility = visible

9、; contentWidth=supertext.offsetWidth contentHeight=supertext.offsetHeight else if (document.layers) xMax = window.innerWidth; yMax = window.innerHeight; contentWidth=document.supertext.document.width contentHeight=document.supertext.document.height document.layerssupertext.visibility = show; setTime

10、out(moveBall(),400); if (hidetimer!=) setTimeout(hidetext(),hidetimer) ,/ 53,9,function moveBall() if (superballRunning = true) calculatePosition(); if (document.all) document.all(supertext).style.left = xPos + document.body.scrollLeft; document.all(supertext).style.top = yPos + document.body.scroll

11、Top; else if (document.layers) document.layerssupertext.left = xPos + pageXOffset; document.layerssupertext.top = yPos + pageYOffset; animatetext=setTimeout(moveBall(),20); function calculatePosition() if (xDir = right) if (xPos (xMax - contentWidth - BallSpeed) xDir = left; else if (xDir = left) if

12、 (xPos (0 + BallSpeed) xDir = right; ,/ 53,10,if (yDir = down) if (yPos (yMax - contentHeight - BallSpeed) yDir = up; else if (yDir = up) if (yPos (0 + BallSpeed) yDir = down; if (xDir = right) xPos = xPos + BallSpeed; else if (xDir = left) xPos = xPos - BallSpeed; else xPos = xPos; if (yDir = down)

13、 yPos = yPos + BallSpeed; else if (yDir = up) yPos = yPos - BallSpeed; else yPos = yPos; ,/ 53,11,function hidetext() if (document.all) supertext.style.visibility=hidden else if (document.layers) document.supertext.visibility=hide clearTimeout(animatetext) if (document.all|document.layers) document.

14、write(+thecontent+) window.onload = initializeBall; window.onresize = new Function(window.location.reload(); ,/ 53,12,8.1.4 文字閃爍效果 效 果：彩色文字變換閃爍。 代碼提示：根據(jù)提示將代碼加入相應(yīng)的區(qū)域。 代 碼： 第一步: 將下面的代碼復(fù)制到與之間。 var someText = 歡迎光臨新浪網(wǎng)！;/ 修改內(nèi)容 var aChar; var aSentence; var i=0;/ a counter var colors = new Array(FF0000,FFF

15、F66,FF3399,00FFFF,FF9900,00FF00); / the colors var aColor;/ the chosen color function loadText() / randomly choose color aColor = colorsMath.floor(Math.random()*colors.length); aChar = someText.charAt(i); if (i = 0) aSentence = aChar; else aSentence += aChar; / 50 iterations max.,/ 53,13,if (i +aSen

16、tence+; setTimeout(loadText(),100); / For Netscape Navigator 4 else if (document.layers) document.textDiv.document.write(+aSentence+); document.textDiv.document.close(); setTimeout(loadText(),100); / For other else if (document.getElementById) document.getElementById(textDiv).innerHTML = +aSentence+

17、; setTimeout(loadText(),100); 第二步:修改中的內(nèi)容，將下面的代碼加入原中 onLoad=loadText(),/ 53,14,8.1.5 滾動字幕(一) 效 果：文字內(nèi)容垂直滾動 代碼提示：將下面的代碼復(fù)制到與之間 代 碼: document.write(當(dāng)人們真正進(jìn)入到生命科學(xué)的范圍之后，他會發(fā)現(xiàn)，一切是那樣地令人激動和富有魅力，從而不由自主地被吸引著一步一步地去深入地探索生命的奧秘。對于生命的研究在改善人類的狀態(tài)方面有著顯著的作用，比如古詩說“人生七十古來稀”，如今是“人生八十不稀奇”，又比如糧食畝產(chǎn)量近十余年里成倍增長，許多悲觀學(xué)者所預(yù)言的“人類大饑荒”并沒

18、有出現(xiàn)。 歡迎光臨新浪網(wǎng)!); ,/ 53,15,8.1.6 滾動字幕(二) 效 果：外匯牌價式滾動字幕,代碼提示：將下面的代碼復(fù)制到與區(qū) 代 碼： .content FONT: 9pt/12pt 宋體 .sm FONT: 8pt/10pt 宋體 /configure the below five variables to change the style of the scroller var scrollerwidth=160 var scrollerheight=50 var scrollerbgcolor=#3399FF /set below to if you dont wish t

19、o use a background image var scrollerbackground=,/ 53,16,/configure the below variable to change the contents of the scroller var messages=new Array() messages0= messages1= messages2= messages0=messages0 + 澳元/美元 0.5339 0.5351 messages0=messages0 + 美元/港幣 7.7967 7.8027 messages0=messages0 + 美元/加元 1.59

20、87 1.6013 messages1=messages1 + 美元/日元 133.40 133.60 messages1=messages1 + 美元/新元 1.8457 1.8487 messages1=messages1 + 美元/瑞郎 1.6625 1.6651 messages2=messages2 + 歐元/美元 0.8781 0.8797 messages2=messages2 + 英鎊/美元 1.4372 1.4392 /Do not edit pass this line/ if (messages.length1) i=2 else i=0,/ 53,17,function

21、 move1(whichlayer) tlayer=eval(whichlayer) if (tlayer.top0 window.onload=startscroll; ,/ 53,24,8.1.7 打字效果 效 果：文字一個一個依次出現(xiàn)，如同打字一般。,代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： var it=0 function initialize() mytext=typing.innerText var myheight=typing.offsetHeight typing.innerText= document.all.typing.style.height=myheight

22、 document.all.typing.style.visibility=visible typeit() ,/ 53,25,function typeit() typing.insertAdjacentText(beforeEnd,mytext.charAt(it) if (it 茶文化是以茶為載體，并通過這個載體來傳播各種文化，是茶與文化的有機(jī)融合，這包含和體現(xiàn)一定時期的物質(zhì)文明和精神文明。 ,/ 53,26,8.1.8 最簡單的鏈接代碼說明 效 果：當(dāng)鼠標(biāo)移到鏈接文字上時顯示鏈接說明,代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： 鼠標(biāo)放上來看看 ,/ 53,27,8.2 鼠標(biāo)特效 8

23、.2.1 屏蔽鼠標(biāo)右鍵 效果：在網(wǎng)頁中屏蔽鼠標(biāo)右鍵。 代碼提示：將下面的代碼復(fù)制到與之間。 代碼： function click(e) if (document.all) if (event.button=2|event.button=3) oncontextmenu=return false; if (document.layers) if (e.which = 3) oncontextmenu=return false; if (document.layers) document.captureEvents(Event.MOUSEDOWN); document.onmousedown=cl

24、ick; document.oncontextmenu = new Function(return false;) ,/ 53,28,8.2.2 禁用鼠標(biāo)左鍵或右鍵 效 果：在網(wǎng)頁中，單擊鼠標(biāo)左鍵或右鍵時，彈出禁用提示。,代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： function click() if (event.button=1) /改成button=2為禁止右鍵 alert(對不起,禁止使用左鍵.) document.onmousedown=click ,/ 53,29,8.2.3 鼠標(biāo)控制窗口卷動 效 果：雙擊鼠標(biāo)，窗口的內(nèi)容向上卷動。 代碼提示：將下面的代碼復(fù)制到與之間。 代

25、碼： var currentpos,timer; function initialize() timer=setInterval(scrollwindow(),100); function sc() clearInterval(timer); function scrollwindow() currentpos=document.body.scrollTop; window.scroll(0,+currentpos); if (currentpos != document.body.scrollTop) sc(); document.onmousedown=sc document.ondblc

26、lick=initialize ,/ 53,30,8.2.4 跟隨鼠標(biāo)的閃爍文字 效 果：鼠標(biāo)走到哪里，一串閃爍的文字就跟到哪里。,代碼提示：根據(jù)提示將代碼加入相應(yīng)的區(qū)域。 代 碼： 第一步：將下面的代碼復(fù)制到與之間。 .modernetstyle FONT-FAMILY: , Times New Roman; FONT-SIZE: 9pt; FONT-WEIGHT: 300; POSITION: absolute; TOP: auto var message=歡 迎 您 光 臨 本 網(wǎng) 站 ！; var x,y; var step=12; var flag=0;,/ 53,31,messag

27、e=message.split(); var xpos=new Array(); for (i=0;i=1; i-) xposi=xposi-1+step;yposi=yposi-1; xpos0=x+step; ypos0=y; for (i=0; i=1; i-) xposi=xposi-1+step; yposi=yposi-1;,/ 53,32,xpos0=x+step; ypos0=y; for (i=0; i for (i=0;i); document.write(messagei); document.write(); if (document.layers) document.

28、captureEvents(Event.MOUSEMOVE); document.onmousemove = handlerMM; function pageonload() icesnake(); window.setTimeout(pageonload();, 2); 第二步：修改中的內(nèi)容，將下面的代碼加入原中 onload=pageonload(),/ 53,33,8.2.5 鼠標(biāo)激活警告框 效 果：鼠標(biāo)移動超級鏈接上，彈出警告對話框。,代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： 新浪歡迎您！,/ 53,34,8.3 按鈕特效 8.3.1 刷新按鈕 效 果：刷新網(wǎng)頁 代碼提示：將下面

29、的代碼復(fù)制到與之間。 代 碼： 刷新 除了上面這種按鈕刷新的形式外，還可以做成文字或者圖片鏈接刷新的形式，分別見下面的代碼： 或 刷新 ,/ 53,35,8.3.2 打印按鈕 效 果：點(diǎn)擊按鈕打開打印對話框 代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： 8.3.3 打開全屏窗口 效 果：點(diǎn)擊后全屏打開窗口。 代碼提示：按下面的說明修改并復(fù)制代碼 代 碼： 一：將下面的代碼放在與之間。 二：將下面的代碼復(fù)制到與之間。 ,/ 53,36,8.3.4 關(guān)閉窗口按鈕 效 果：點(diǎn)擊按鈕后關(guān)閉本窗口。 代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： 8.3.5 鏈接按鈕 效 果：點(diǎn)擊按鈕后鏈接到指定網(wǎng)頁

30、。 代碼提示：將下面代碼復(fù)制到與之間。 代 碼： ,/ 53,37,8.4 標(biāo)題欄、狀態(tài)欄特效 8.4.1 標(biāo)題欄打字效果 效 果：在標(biāo)題欄中用打字效果顯示文字。,代碼提示：將下面的代碼復(fù)制到與之間。 代 碼： var message=歡迎光臨新浪網(wǎng)！ /修改顯示內(nèi)容 var message=message+ i=0 var temptitle= var speed=300 /速度控制 function titler() if (!document.all /- !- Begin function settitle() var a = 現(xiàn)在是第10秒 ; var b = 現(xiàn)在是第20秒; va

31、r c = 現(xiàn)在是第30秒; var d = 現(xiàn)在是第40秒 ; var e = 現(xiàn)在是第50秒; var f = 現(xiàn)在是第60秒; var t = new Date(); s = t.getSeconds();,/ 53,41,if (s = 10) document.title = a; else if (s = 20) document.title = b; else if (s = 30) document.title = c; else if (s = 40) document.title = d; else if (s = 50) document.title = e; else

32、if (s = 00) document.title = f; setTimeout(settitle(), 1000); settitle() / End - ,/ 53,42,8.5 窗口特效 8.5.1 彈出新窗口 效 果：進(jìn)入本頁時會自動彈出一個新窗口。 使用方法：將下面的代碼復(fù)制到與之間。 代 碼： 注意，如果瀏覽器等軟件阻止彈出新窗口，只要將其設(shè)置改為允許彈出即可。,/ 53,43,8.5.2 打開無邊窗口 效 果：進(jìn)入本頁時窗口自動最大化。 使用方法：將下面的代碼復(fù)制到與之間。 代 碼： function aaawin() aaa=window.open(,窗口名,fullscr

33、een=yes) 新浪網(wǎng),/ 53,44,8.5.3 打開指定大小的窗口 效 果：進(jìn)入本頁時窗口自動最大化。 使用方法：將下面的代碼復(fù)制到與之間。 代 碼： 打開窗口,/ 53,45,8.5.4 打開簡潔窗口 效 果：打開的窗口沒有菜單欄、工具欄等。,使用方法：按下面的說明修改并復(fù)制代碼。 代 碼： 1. 將下面的代碼放在與之間 2. 將下面的代碼復(fù)制到與之間并修改其中的鏈接地址和名稱。 百度搜索,/ 53,46,8.6 其它特效 8.6.1 加入收藏 效 果：點(diǎn)擊后將網(wǎng)頁添加到收藏夾。,使用方法：將下面的代碼修改、復(fù)制到需要的位置。 代 碼： 收藏本站,/ 53,47,8.6.2 設(shè)為首頁 效 果：點(diǎn)擊后將網(wǎng)設(shè)為瀏覽器首頁。 使用方法：將下面的代碼修改、復(fù)制到需要的位置。 代 碼： 設(shè)為首