网页设计实用技术.ppt

1、/ 53,1,第8章 网页设计实用技术（2学时）,网页特效是最常用的网页实用技术之一，它是用程序代码在网页中实现特殊效果或者特殊功能的一种技术。它一般是用Java Scritp(Java脚本)来实现其特殊效果，通过客户端的WEB浏览器来执行。网页特效有时也利用JAVA的APLET 来实现。 网页特效一般分为：时间日期类、页面背景类、页面特效类、图形图象类、按钮特效类、鼠标事件类、Cookie脚本、文本特效类、状态栏特效、代码生成类、导航菜单类、页面搜索类、在线测试类、密码类、技巧类、综合类、游戏类等等。 如果网页特效使用得当，往往能够为网页增添活泼的气氛，起到事半功倍、画龙点睛的作用。,/ 5

2、3,2,8.1 文字特效 8.1.1 跑马灯文字 效 果: 多条文字信息在一行中逐条交替出现。,代码提示：根据提示将代码加入相应的区域。 代 码: 第一步: 将下面的代码复制到与之间。 !- HTML comment to placate non JavaScript capable browsers var timerDM=null; var msgCnt = 5; / 设置信息的数目. var DisplayTime = 2000; / 间隔时间 var msgNum = 1; var Timeshow = DisplayTime; function araVob() var Displa

3、yLine = new araVob(); DisplayLine1 = 金色三峡; DisplayLine2 = 银色大坝; DisplayLine3 = 绿色宜昌; DisplayLine4 = 特色学院;,/ 53,3,DisplayLine5 = 金色三峡 银色大坝 绿色宜昌 特色学院; /* 只要修改上面的n，就可以增加信息数 */ 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 变色的文字 效 果：显示的文字逐字改变颜色 使用方法：将下面的代码复制到与之间。 代 码： ); 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 在屏幕上不断运动反

7、弹的文字 效 果：显示的文字是屏幕上移动，遇到边框镜像反弹后继续移动。 代码提示：将下面的代码复制到与之间。 #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 =

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 文字闪烁效果 效 果：彩色文字变换闪烁。 代码提示：根据提示将代码加入相应的区域。 代 码： 第一步: 将下面的代码复制到与之间。 var someText = 欢迎光临新浪网！;/ 修改内容 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); 第二步:修改中的内容，将下面的代码加入原中 onLoad=loadText(),/ 53,14,8.1.5 滚动字幕(一) 效 果：文字内容垂直滚动 代码提示：将下面的代码复制到与之间 代 码: document.write(当人们真正进入到生命科学的范围之后，他会发现，一切是那样地令人激动和富有魅力，从而不由自主地被吸引着一步一步地去深入地探索生命的奥秘。对于生命的研究在改善人类的状态方面有着显著的作用，比如古诗说“人生七十古来稀”，如今是“人生八十不稀奇”，又比如粮食亩产量近十余年里成倍增长，许多悲观学者所预言的“人类大饥荒”并没

18、有出现。 欢迎光临新浪网!); ,/ 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=#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 打字效果 效 果：文字一个一个依次出现，如同打字一般。,代码提示：将下面的代码复制到与之间。 代 码： 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 茶文化是以茶为载体，并通过这个载体来传播各种文化，是茶与文化的有机融合，这包含和体现一定时期的物质文明和精神文明。 ,/ 53,26,8.1.8 最简单的链接代码说明 效 果：当鼠标移到链接文字上时显示链接说明,代码提示：将下面的代码复制到与之间。 代 码： 鼠标放上来看看 ,/ 53,27,8.2 鼠标特效 8

23、.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) 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 禁用鼠标左键或右键 效 果：在网页中，单击鼠标左键或右键时，弹出禁用提示。,代码提示：将下面的代码复制到与之间。 代 码： function click() if (event.button=1) /改成button=2为禁止右键 alert(对不起,禁止使用左键.) document.onmousedown=click ,/ 53,29,8.2.3 鼠标控制窗口卷动 效 果：双击鼠标，窗口的内容向上卷动。 代码提示：将下面的代码复制到与之间。 代

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 跟随鼠标的闪烁文字 效 果：鼠标走到哪里，一串闪烁的文字就跟到哪里。,代码提示：根据提示将代码加入相应的区域。 代 码： 第一步：将下面的代码复制到与之间。 .modernetstyle FONT-FAMILY: , Times New Roman; FONT-SIZE: 9pt; FONT-WEIGHT: 300; POSITION: absolute; TOP: auto var message=欢 迎 您 光 临 本 网 站 ！; 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); 第二步：修改中的内容，将下面的代码加入原中 onload=pageonload(),/ 53,33,8.2.5 鼠标激活警告框 效 果：鼠标移动超级链接上，弹出警告对话框。,代码提示：将下面的代码复制到与之间。 代 码： 新浪欢迎您！,/ 53,34,8.3 按钮特效 8.3.1 刷新按钮 效 果：刷新网页 代码提示：将下面

29、的代码复制到与之间。 代 码： 刷新 除了上面这种按钮刷新的形式外，还可以做成文字或者图片链接刷新的形式，分别见下面的代码： 或 刷新 ,/ 53,35,8.3.2 打印按钮 效 果：点击按钮打开打印对话框 代码提示：将下面的代码复制到与之间。 代 码： 8.3.3 打开全屏窗口 效 果：点击后全屏打开窗口。 代码提示：按下面的说明修改并复制代码 代 码： 一：将下面的代码放在与之间。 二：将下面的代码复制到与之间。 ,/ 53,36,8.3.4 关闭窗口按钮 效 果：点击按钮后关闭本窗口。 代码提示：将下面的代码复制到与之间。 代 码： 8.3.5 链接按钮 效 果：点击按钮后链接到指定网页

30、。 代码提示：将下面代码复制到与之间。 代 码： ,/ 53,37,8.4 标题栏、状态栏特效 8.4.1 标题栏打字效果 效 果：在标题栏中用打字效果显示文字。,代码提示：将下面的代码复制到与之间。 代 码： var message=欢迎光临新浪网！ /修改显示内容 var message=message+ i=0 var temptitle= var speed=300 /速度控制 function titler() if (!document.all /- !- Begin function settitle() var a = 现在是第10秒 ; var b = 现在是第20秒; va

31、r c = 现在是第30秒; var d = 现在是第40秒 ; var e = 现在是第50秒; var f = 现在是第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 弹出新窗口 效 果：进入本页时会自动弹出一个新窗口。 使用方法：将下面的代码复制到与之间。 代 码： 注意，如果浏览器等软件阻止弹出新窗口，只要将其设置改为允许弹出即可。,/ 53,43,8.5.2 打开无边窗口 效 果：进入本页时窗口自动最大化。 使用方法：将下面的代码复制到与之间。 代 码： function aaawin() aaa=window.open(,窗口名,fullscr

33、een=yes) 新浪网,/ 53,44,8.5.3 打开指定大小的窗口 效 果：进入本页时窗口自动最大化。 使用方法：将下面的代码复制到与之间。 代 码： 打开窗口,/ 53,45,8.5.4 打开简洁窗口 效 果：打开的窗口没有菜单栏、工具栏等。,使用方法：按下面的说明修改并复制代码。 代 码： 1. 将下面的代码放在与之间 2. 将下面的代码复制到与之间并修改其中的链接地址和名称。 百度搜索,/ 53,46,8.6 其它特效 8.6.1 加入收藏 效 果：点击后将网页添加到收藏夹。,使用方法：将下面的代码修改、复制到需要的位置。 代 码： 收藏本站,/ 53,47,8.6.2 设为首页 效 果：点击后将网设为浏览器首页。 使用方法：将下面的代码修改、复制到需要的位置。 代 码： 设为首