1、/ 53,1,第8章 网页设计实用技术（2学时）,网页特效是最常用的网页实用技术之一，它是用程序代码在网页中实现特殊效果或者特殊功能的一种技术。它一般是用Java Scritp(Java脚本)来实现其特殊效果，通过客户端的WEB浏览器来执行。网页特效有时也利用JAVA的APLET 来实现。网页特效一般分为：时间日期类、页面背景类、页面特效类、图形图象类、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类、游戏类等等。如果网页特效使用得当，往往能够为网页增添活泼的气氛，起到事半功倍、画龙点睛的作用。,/ 53,
2、2,8.1 文字特效 8.1.1 跑马灯文字 效 果: 多条文字信息在一行中逐条交替出现。,代码提示：根据提示将代码加入相应的区域。 代 码: 第一步: 将下面的代码复制到与之间。,/ 53,3,DisplayLine5 = “金色三峡 银色大坝 绿色宜昌 特色学院“; /* 只要修改上面的n，就可以增加信息数 */ var msg = DisplayLine1; function DisplayMsg() document.msgform.message.value=msg;timerDM = setTimeout(“DisplayMsg()“,Timeshow);ChangeMsg();
3、function ChangeMsg() msgNum+;if (msgCnt msgNum) msgNum = 1;msg = DisplayLinemsgNum;if (msgNum = 1) / change display timeTimeshow = 3000; / of a specific messageelse Timeshow = DisplayTime; ,/ 53,4,function quitDisplay() document.msgform.message.value=“Alternate! But dont scroll “sideways“!“; / 第二步:把
4、原改为,/ 53,5,8.1.2 变色的文字 效 果：显示的文字逐字改变颜色 使用方法：将下面的代码复制到与之间。 代 码：“); 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.document
5、.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 在屏幕上不断运动反
6、弹的文字 效 果：显示的文字是屏幕上移动，遇到边框镜像反弹后继续移动。 代码提示：将下面的代码复制到与之间。#supertext position:absolute; left:0; top:0; visibility:hide; visibility:hidden;var thecontent=欢迎光临新浪网 var hidetimer=;var BallSpeed = 10; var contentWidth; var contentHeight; var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos = 0;
7、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.clientWidthyMax = document.body.clientHeightdocument.all(“supertext“).style.visibility = “visible“;
8、contentWidth=supertext.offsetWidthcontentHeight=supertext.offsetHeightelse if (document.layers) xMax = window.innerWidth;yMax = window.innerHeight;contentWidth=document.supertext.document.widthcontentHeight=document.supertext.document.heightdocument.layers“supertext“.visibility = “show“;setTimeout(m
9、oveBall(),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.scrollTop;
10、else if (document.layers) document.layers“supertext“.left = xPos + pageXOffset;document.layers“supertext“.top = yPos + pageYOffset;animatetext=setTimeout(moveBall(),20); function calculatePosition() if (xDir = “right“) if (xPos (xMax - contentWidth - BallSpeed) xDir = “left“; else if (xDir = “left“)
11、 if (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
12、 (yDir = “down“) 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|documen
13、t.layers) document.write(+thecontent+) window.onload = initializeBall; window.onresize = new Function(“window.location.reload()“); ,/ 53,12,8.1.4 文字闪烁效果 效 果：彩色文字变换闪烁。 代码提示：根据提示将代码加入相应的区域。 代 码： 第一步: 将下面的代码复制到与之间。var someText = “欢迎光临新浪网！“; / 修改内容 var aChar; var aSentence; var i=0; / a counter var colo
14、rs = new Array(“FF0000“,“FFFF66“,“FF3399“,“00FFFF“,“FF9900“,“00FF00“); / the colors var aColor; / the chosen color function loadText() / randomly choose coloraColor = colorsMath.floor(Math.random()*colors.length);aChar = someText.charAt(i);if (i = 0)aSentence = aChar;elseaSentence += aChar; / 50 ite
15、rations max.,/ 53,13,if (i “+aSentence+“;setTimeout(“loadText()“,100);/ For Netscape Navigator 4else if (document.layers) document.textDiv.document.write(“+aSentence+“);document.textDiv.document.close();setTimeout(“loadText()“,100);/ For otherelse if (document.getElementById) document.getElementById
16、(“textDiv“).innerHTML = “+aSentence+“;setTimeout(“loadText()“,100);第二步:修改中的内容，将下面的代码加入原中onLoad=“loadText()“,/ 53,14,8.1.5 滚动字幕(一) 效 果：文字内容垂直滚动 代码提示：将下面的代码复制到与之间 代 码: document.write(当人们真正进入到生命科学的范围之后，他会发现，一切是那样地令人激动和富有魅力，从而不由自主地被吸引着一步一步地去深入地探索生命的奥秘。对于生命的研究在改善人类的状态方面有着显著的作用，比如古诗说“人生七十古来稀”，如今是“人生八十不稀奇”
17、，又比如粮食亩产量近十余年里成倍增长，许多悲观学者所预言的“人类大饥荒”并没有出现。 欢迎光临新浪网!); ,/ 53,15,8.1.6 滚动字幕(二) 效 果：外汇牌价式滚动字幕,代码提示：将下面的代码复制到与区 代 码：.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
18、=#3399FF /set below to if you dont wish to 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.
19、7967 7.8027 messages0=messages0 + 美元/加元 1.5987 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 (mes
20、sages.length1) i=2 else i=0,/ 53,17,function move1(whichlayer) tlayer=eval(whichlayer) if (tlayer.top0&tlayer.top=tlayer.document.height*-1) tlayer.top-=5 setTimeout(“move1(tlayer)“,100) else tlayer.top=scrollerheight tlayer.document.write(messagesi) tlayer.document.close() if (i=messages.length-1)
21、i=0 else i+ ,/ 53,18,function move2(whichlayer) tlayer2=eval(whichlayer) if (tlayer2.top0&tlayer2.top=tlayer2.document.height*-1) tlayer2.top-=5 setTimeout(“move2(tlayer2)“,100) else tlayer2.top=scrollerheight tlayer2.document.write(messagesi) tlayer2.document.close() if (i=messages.length-1) i=0 el
22、se i+ ,/ 53,19,function move3(whichdiv) tdiv=eval(whichdiv) if (tdiv.style.pixelTop0&tdiv.style.pixelTop=tdiv.offsetHeight*-1) tdiv.style.pixelTop-=5 setTimeout(“move3(tdiv)“,100) else tdiv.style.pixelTop=scrollerheight tdiv.innerHTML=messagesi if (i=messages.length-1) i=0 else i+ ,/ 53,20,function
23、move4(whichdiv) tdiv2=eval(whichdiv) if (tdiv2.style.pixelTop0&tdiv2.style.pixelTop=tdiv2.offsetHeight*-1) tdiv2.style.pixelTop-=5 setTimeout(“move4(second2)“,100) else tdiv2.style.pixelTop=scrollerheight tdiv2.innerHTML=messagesi if (i=messages.length-1) i=0 else i+ ,/ 53,21,function startscroll()
24、if (document.all) move3(first2) second2.style.top=scrollerheight second2.style.visibility=visible else if (document.layers) document.main.visibility=show move1(document.main.document.first) document.main.document.second.top=scrollerheight+5 document.main.document.second.visibility=show function crea
25、teLayer() if (document.layers) document.writeln() document.writeln() document.write(messages0) document.writeln(),/ 53,22,document.writeln() document.write(messages1) document.writeln() document.writeln() else if (document.all)document.writeln() document.writeln() document.writeln() document.write(m
26、essages0) document.writeln() document.writeln() document.write(messages1) document.writeln() document.writeln() document.writeln() ,/ 53,23,滚动外汇牌价createLayer(); window.onload=startscroll; ,/ 53,24,8.1.7 打字效果 效 果：文字一个一个依次出现，如同打字一般。,代码提示：将下面的代码复制到与之间。 代 码：var it=0 function initialize() mytext=typing.i
27、nnerText var myheight=typing.offsetHeight typing.innerText= document.all.typing.style.height=myheight document.all.typing.style.visibility=“visible“ typeit() ,/ 53,25,function typeit() typing.insertAdjacentText(“beforeEnd“,mytext.charAt(it) if (it茶文化是以茶为载体，并通过这个载体来传播各种文化，是茶与文化的有机融合，这包含和体现一定时期的物质文明和精
28、神文明。 ,/ 53,26,8.1.8 最简单的链接代码说明 效 果：当鼠标移到链接文字上时显示链接说明,代码提示：将下面的代码复制到与之间。 代 码： 鼠标放上来看看 ,/ 53,27,8.2 鼠标特效 8.2.1 屏蔽鼠标右键 效果：在网页中屏蔽鼠标右键。 代码提示：将下面的代码复制到与之间。 代码：function click(e) if (document.all) if (event.button=2|event.button=3) oncontextmenu=return false; if (document.layers) if (e.which = 3) oncontextm
29、enu=return false; if (document.layers) document.captureEvents(Event.MOUSEDOWN); document.onmousedown=click; document.oncontextmenu = new Function(“return false;“) ,/ 53,28,8.2.2 禁用鼠标左键或右键 效 果：在网页中，单击鼠标左键或右键时，弹出禁用提示。,代码提示：将下面的代码复制到与之间。 代 码：function click() if (event.button=1) /改成button=2为禁止右键 alert(对
30、不起,禁止使用左键.) document.onmousedown=click ,/ 53,29,8.2.3 鼠标控制窗口卷动 效 果：双击鼠标，窗口的内容向上卷动。 代码提示：将下面的代码复制到与之间。 代 码：var currentpos,timer; function initialize() timer=setInterval(“scrollwindow()“,100); function sc() clearInterval(timer); function scrollwindow() currentpos=document.body.scrollTop; window.scroll
31、(0,+currentpos); if (currentpos != document.body.scrollTop) sc(); document.onmousedown=sc document.ondblclick=initialize ,/ 53,30,8.2.4 跟随鼠标的闪烁文字 效 果：鼠标走到哪里，一串闪烁的文字就跟到哪里。,代码提示：根据提示将代码加入相应的区域。 代 码： 第一步：将下面的代码复制到与之间。.modernetstyle FONT-FAMILY: , “Times New Roman“; FONT-SIZE: 9pt; FONT-WEIGHT: 300; POS
32、ITION: absolute; TOP: auto var message=“欢 迎 您 光 临 本 网 站 ！“; var x,y; var step=12; var flag=0;,/ 53,31,message=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;
33、 ypos0=y; for (i=0; ifor (i=0;i“); document.write(messagei); document.write(“); if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = handlerMM;function pageonload() icesnake(); window.setTimeout(“pageonload();“, 2);第二步：修改中的内容，将下面的代码加入原中 onload=pageonload(),/ 53,33,8.2
34、.5 鼠标激活警告框 效 果：鼠标移动超级链接上，弹出警告对话框。,代码提示：将下面的代码复制到与之间。 代 码： 新浪欢迎您！,/ 53,34,8.3 按钮特效 8.3.1 刷新按钮 效 果：刷新网页 代码提示：将下面的代码复制到与之间。 代 码： 刷新 除了上面这种按钮刷新的形式外，还可以做成文字或者图片链接刷新的形式，分别见下面的代码：或 刷新,/ 53,35,8.3.2 打印按钮 效 果：点击按钮打开打印对话框代码提示：将下面的代码复制到与之间。 代 码：8.3.3 打开全屏窗口 效 果：点击后全屏打开窗口。 代码提示：按下面的说明修改并复制代码 代 码： 一：将下面的代码放在与之间。
35、二：将下面的代码复制到与之间。 ,/ 53,36,8.3.4 关闭窗口按钮 效 果：点击按钮后关闭本窗口。代码提示：将下面的代码复制到与之间。 代 码：8.3.5 链接按钮 效 果：点击按钮后链接到指定网页。代码提示：将下面代码复制到与之间。 代 码：,/ 53,37,8.4 标题栏、状态栏特效 8.4.1 标题栏打字效果 效 果：在标题栏中用打字效果显示文字。,代码提示：将下面的代码复制到与之间。 代 码：var message=“欢迎光临新浪网！http:/“ /修改显示内容 var message=message+“ “ i=“0“ var temptitle=“ var speed=“
36、300“ /速度控制 function titler() if (!document.all&!document.getElementById) return document.title=temptitle+message.charAt(i) temptitle=temptitle+message.charAt(i) i+ if(i=message.length) i=“0“ temptitle=“ setTimeout(“titler()“,speed) window.onload=titler ,/ 53,38,8.4.2 跑马灯标题栏 效 果：在标题栏中跑马灯方式显示文字。 代码提示：
37、按下面的说明修改并复制代码。 代 码： 1将中的内容改为你需要的文字。 2. 将下面的代码放在与之间。var text=document.title var timerID function newtext() clearTimeout(timerID) document.title=text.substring(1,text.length)+text.substring(0,1) text=document.title.substring(0,text.length) timerID = setTimeout(“newtext()“, 100) 3. 修改中的内容，将下面的代码加入原中 on
38、load=“newtext()“,/ 53,39,8.4.3 标题栏的日期显示 效 果：在标题栏中显示当前日期。,代码提示：将下面的代码放在与之间。 代 码：,/ 53,40,8.4.4 标题栏交替显示不同内容 效 果：在标题栏交替显示不同内容。 代码提示：将下面的代码复制到与之间。 代 码：); /,/ 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 =
39、d; else if (s = 50) document.title = e; else if (s = 00) document.title = f;setTimeout(“settitle()“, 1000);settitle() / End ,/ 53,42,8.5 窗口特效 8.5.1 弹出新窗口 效 果：进入本页时会自动弹出一个新窗口。 使用方法：将下面的代码复制到与之间。 代 码：注意，如果浏览器等软件阻止弹出新窗口，只要将其设置改为允许弹出即可。,/ 53,43,8.5.2 打开无边窗口 效 果：进入本页时窗口自动最大化。 使用方法：将下面的代码复制到与之间。 代 码：funct
40、ion aaawin() aaa=window.open(http:/,窗口名,fullscreen=yes) 新浪网,/ 53,44,8.5.3 打开指定大小的窗口 效 果：进入本页时窗口自动最大化。 使用方法：将下面的代码复制到与之间。 代 码：打开窗口,/ 53,45,8.5.4 打开简洁窗口 效 果：打开的窗口没有菜单栏、工具栏等。,使用方法：按下面的说明修改并复制代码。 代 码： 1. 将下面的代码放在与之间2. 将下面的代码复制到与之间并修改其中的链接地址和名称。 百度搜索,/ 53,46,8.6 其它特效 8.6.1 加入收藏 效 果：点击后将网页添加到收藏夹。,使用方法：将下面
41、的代码修改、复制到需要的位置。 代 码： 收藏本站,/ 53,47,8.6.2 设为首页 效 果：点击后将网设为浏览器首页。 使用方法：将下面的代码修改、复制到需要的位置。 代 码： 设为首页8.6.3 去掉超链接的下划线 效 果：在网页的文字链接中不显示下划线。 使用方法：将下面的代码复制到与之间。 代 码：注意，网页的标签里不能再有link之类的属性，否则本效果会失效。,/ 53,48,8.6.4 自动跳转网页或自动刷新网页 效 果：在预定的秒数后，由正在浏览的页面自动跳转到target.html这一页，若target.html为本页则为自动刷新本页。 使用方法：将下面的代码复制到与之间。
42、 代 码：本例中的60为设定的秒数，target.html为跳转的网页。8.6.5 返回上一页 效 果：点击后返回上一页。使用方法：将下面的代码复制到与之间。 代 码： 返回上一页,/ 53,49,8.6.6 自动关闭窗口 效 果：在预定的秒数后自动减半本窗口。 使用方法：将下面的代码复制到与之间。 代 码：0)setTimeout(“clock();“,1000); else self.close(); var i=10 /定时 clock(); / ,/ 53,50,8.6.7 目录式导航菜单 效 果：目录式下拉导航菜单。,使用方法：按下面的说明修改并复制代码。 代 码： 第一步，将下面的
43、代码复制到与之间。function out1() if(window.event.toElement.id!=“menu1“ / ,/ 53,51,第二步，将下面的代码复制到与之间。三峡宜昌今日宜昌 三峡风光 三峡传说 特色景观 三峡旅游 三峡工程,/ 53,52,学院概况学院简介 历史沿革 现任领导 机构设置 形象标识 校园画册,/ 53,53,8.7 本章小结本章介绍了最常用的几类网页特效代码实例，读者应灵活掌握，使用时根据具体情况改变代码中某些变量的初值或终值，将某些网址或字符替换成自己需要的内容。 下面是使用代码最常见的问题：1. 怎样使用特效代码？ 只要把特效代码复制、粘贴到你的网页源代码中，保存网页，再在浏览器中打开，就会看到效果。2. 怎样在我的网页中插入代码？(1)使用DreamWeaver：在编辑状态下按F10即弹出源代码窗口，将特效代码粘贴进去即可。 (2)使用FrontPage：点击编辑窗口左下角“HTML”选项卡出现源代码窗口，将特效代码粘贴进去即可。 (3)直接使用“记事本”等编辑器：直接用这些编辑器打开网页文件，出现源代码，将特效代码粘贴进去即可。 3. 在什么地方插入代码？一般来说，在网页源代码的与之间的任何地方插入代码都可以。但有些代码要求插入到与之间，还有的需要改变项BODY后面的参数。具体使用参见代码说明。,
