网页设计实用技术.ppt

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

2、，起到事半功倍、画龙点睛的作用。 周次 17 课次 2 课时 2 备注 课题 8.1 8.4 网页设计实用技术 目的 掌握常见网页设计技巧 重点 8.1 8.4 网页设计实用技术 难点 8.1 8.4 网页设计实用技术 第8章 网页设计实用技术 / 53 2 8.1 文字特效 8.1.1 跑马灯文字 效 果 : 多条文字信息在一行中逐条交替出现。 代码提示：根据提示将代码加入相应的区域。 代 码 : 第一步 : 将下面的代码复制到 与 之间。 第二步 :把原 改为 第8章 网页设计实用技术 / 53 5 8.1.2 变色的文字 效 果：显示的文字逐字改变颜色 使用方法：将下面的代码复制到 与

3、之间。 代 码： “); else document.write(“); 第8章 网页设计实用技术 / 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.write(); document.a.document.close(); if

4、 (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); - - 第8章 网页设计实用技术 / 53 7 8.1.3 在屏幕上不断运动反弹的文字 效 果：显示的文字是屏幕上移动，遇到边框镜像反弹

5、后继续移动。 代码提示：将下面的代码复制到 与 之间。 #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; var xDir = right; var yD

6、ir = down; 第8章 网页设计实用技术 / 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“; contentW

7、idth=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.layers“supertext“.visibility = “show“; setTimeout(mo

8、veBall(),400); if (hidetimer!=) setTimeout(“hidetext()“,hidetimer) 第8章 网页设计实用技术 / 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

9、.body.scrollTop; 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

10、 if (xDir = “left“) if (xPos (yMax - contentHeight - BallSpeed) yDir = “up“; else if (yDir = “up“) if (yPos +thecontent+) window.onload = initializeBall; window.onresize = new Function(“window.location.reload()“); 第8章 网页设计实用技术 / 53 12 8.1.4 文字闪烁效果 效 果：彩色文字变换闪烁。 代码提示：根据提示将代码加入相应的区域。 代 码： 第一步 : 将下面的代码

11、复制到 与 之间。 var someText = “欢迎光临新浪网！ “; / 修改内容 var aChar; var aSentence; var i=0; / a counter var colors = new Array(“FF0000“,“FFFF66“,“FF3399“,“00FFFF“,“FF9900“,“00FF00“); / the colors var aColor; / the chosen color function loadText() / randomly choose color aColor = colorsMath.floor(Math.random()*c

12、olors.length); aChar = someText.charAt(i); if (i = 0) aSentence = aChar; else aSentence += aChar; / 50 iterations max. 第8章 网页设计实用技术 / 53 13 if (i “+aSentence+“; setTimeout(“loadText()“,100); / For Netscape Navigator 4 else if (document.layers) document.textDiv.document.write(“+aSentence+“); document

13、.textDiv.document.close(); setTimeout(“loadText()“,100); / For other else if (document.getElementById) document.getElementById(“textDiv“).innerHTML = “+aSentence+“; setTimeout(“loadText()“,100); 第二步 :修改 中的内容，将下面的代码加入原 中 onLoad=“loadText()“ 第8章 网页设计实用技术 / 53 14 8.1.5 滚动字幕 (一 ) 效 果：文字内容垂直滚动 代码提示：将下面的代

14、码复制到 与 之间 代 码 : document.write(当人们真正进入到生命科学的范围之后，他会发现，一切是那样地令人激动和富有魅力，从而不由自主地被吸引着一步一步地去深入地探索生命的奥秘。 对于生命的研究在改善人类的状态方面有着显著的作用，比如古诗说 “ 人生七十古来稀 ” ，如今是 “ 人生八十不稀奇 ” ，又比如粮食亩产量近十余年里成倍增长，许多悲观学者所预言的 “ 人类大饥荒 ” 并没有出现。 欢迎光临新浪网 !); 第8章 网页设计实用技术 / 53 15 8.1.6 滚动字幕 (二 ) 效 果：外汇牌价式滚动字幕 代码提示：将下面的代码复制到 与 区 代 码： .conten

15、t 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 to use a background image var scrollerbackground= 第8章 网页设计实用技术 / 53 16 /confi

16、gure 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.5987 1.6013 messages1=messages1 + 美元 /日元 133.40 133.60 mess

17、ages1=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 第8章 网页设计实用技术 / 53 17 function move1(whichlayer) tlayer=eval(whichlay

18、er) if (tlayer.top0 window.onload=startscroll; 第8章 网页设计实用技术 / 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 document.all.typing.styl

19、e.visibility=“visible“ typeit() 第8章 网页设计实用技术 / 53 25 function typeit() typing.insertAdjacentText(“beforeEnd“,mytext.charAt(it) if (it 茶文化是以茶为载体，并通过这个载体来传播各种文化，是茶与文化的有机融合，这包含和体现一定时期的物质文明和精神文明。 第8章 网页设计实用技术 / 53 26 8.1.8 最简单的链接代码说明 效 果：当鼠标移到链接文字上时显示链接说明 代码提示：将下面的代码复制到 与 之间。 代 码： 鼠标放上来看看 第8章 网页设计实用技术 /

20、 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) oncontextmenu=return false; if (document.layers) document.captureEvents(Event.MOUSEDOWN); docu

21、ment.onmousedown=click; document.oncontextmenu = new Function(“return false;“) 第8章 网页设计实用技术 / 53 28 8.2.2 禁用鼠标左键或右键 效 果：在网页中，单击鼠标左键或右键时，弹出禁用提示。 代码提示：将下面的代码复制到 与 之间。 代 码： function click() if (event.button=1) /改成 button=2为禁止右键 alert(对不起 ,禁止使用左键 .) document.onmousedown=click 第8章 网页设计实用技术 / 53 29 8.2.3

22、鼠标控制窗口卷动 效 果：双击鼠标，窗口的内容向上卷动。 代码提示：将下面的代码复制到 与 之间。 代 码： 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.sc

23、rollTop) sc(); document.onmousedown=sc document.ondblclick=initialize 第8章 网页设计实用技术 / 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;