【网页设计教案】JavaScript文字特效网页设计.docVIP

教学项目二十三 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:0pxdiv 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(MS