教学项目二十三 JavaScript文字特效网页设计 【教学内容】 讲解JavaScript中几种文字特效网页设计 【教学目的】 使学生学会设计文字的特效 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime工作室 重庆出版社 3．<<JavaScript从入门到精通>> 电脑报社出版 4．<<JavaScript编程起步>> 人民邮电出版社 【教学过程】 【新课】 案例设计： 设计文字绕圈旋转特效网页  程序代码如下： <html> <body background="21.jpg"> <SCRIPT LANGUAGE="JavaScript"> if (document.all) { yourLogo = "湖北职业技术学院计科系学生网"; logoFont = "隶书"; logoColor = "00b000"; yourLogo = yourLogo.split(''); L = yourLogo.length; TrigSplit = 360 / L; Sz = new Array() logoWidth = 180; logoHeight = -30; ypos = 0; xpos = 0; step = 0.03; currStep = 0; document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < L; i++) { document.write('<div id="ie" style="position:absolute;top:0px;left:0px;' +'width:20px;height:20px;font-family:'+logoFont+';font-size:40px;' +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>'); } document.write('</div></div>'); function Mouse() { ypos = event.y; xpos = event.x - 5; } document.onmousemove=Mouse; function animateLogo() { outer.style.pixelTop = document.body.scrollTop; for (i = 0; i < L; i++) { ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180); ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180); Sz[i] = ie[i].style.pixelTop - ypos; if (Sz[i] < 5) Sz[i] = 5; ie[i].style.fontSize = Sz[i]*1.5 ; } currStep -= step; setTimeout('animateLogo()', 20); } window.onload = animateLogo; } </script> </body> </html> 案例二、设计文字的变色特效网页     程序代码如下： <html> <body> <script language=javascript> <!-- function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) { this[i] = initArray.arguments[i]; } } var ctext = "看看我，我会变色"; var speed = 1000; var x = 0; var color = new initArray( "red", "blue", "green", "black", "yellow", "pink"); if (navigator.appVersion.indexOf("MSIE") != -1) { document.write('<div id="c"><center>'+ctext+'</center></div>'); } function chcolor() { if (navigator.appVersion.indexOf("MSIE") != -1) { document.all.c.style.color = color[x]; } (x < color.length-1) ? x++ : x = 0; } setInterval("chcolor()",1000); --> </script> </body> </html> 案例设计： 设计网页，在状态栏实现文字的跑马灯效果，显示信息： “欢迎光临 湖北职院 计科系”  程序代码如下： <html> <head> <SCRIPT Language="JavaScript"> var msg="欢迎光临 湖北职院 计科系"; var interval = 300; seq = 0; function Scroll() { len = msg.length; window.status = msg.substring(0, seq+1); seq++; if ( seq >= len ) { seq = 0 }; window.setTimeout("Scroll();", interval ); } </SCRIPT> </head> <body onload="Scroll()"> </body> </html> 【课后小结】 通过本次课学习，学会对JavaScript源代码进行修改，实现不同的文字特效。