湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十三 JavaScript文字特效网页设计 【教学内容】 讲解 JavaScript中几种文字特效网页设计 【教学目的】 使学生学会设计文字的特效 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 < JavaScript入门与提高〉>杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步》 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计文字绕圈旋转特效网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十三 JavaScript 文字特效网页设计 【教学内容】 讲解 JavaScript 中几种文字特效网页设计 【教学目的】 使学生学会设计文字的特效 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 4．<<JavaScript 编程起步>> 人民邮电出版社 【教学过程】 【新课】 一、案例设计： 设计文字绕圈旋转特效网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 G小鬥疯设计教k以19t:ht黑一黑 crosoft Int 文件￠)辑正)查看收凛0)工具∝)帮助0 ⊙园的O抛常古收夹的琳特份③,图·回 地址q)包G:F设计数案5kNsm119, 转到报” 学计 程序代码如下 <html> <body background=21. jpg"> <SCRIPT LANGUAGE="JavaScript> if (document all)i your logo="湖北职业技术学院计科系学生网"; logoFont=“隶书 logoColor="00b000″ yourlogo L yourLogo. length TrigSplit 360/L Sz new Array logoWidth =180 ypos =0; XpOs =0; 0.03 currStep =0 document. write ( <div id="outer"style="position: absolute: top: Opx; left: Opx"><div style="position: relative">') for (i=0 document. write(<div id="ie style="position: absolute; top: Opx; left: Opx +width: 20px; height: 20px; font-family: +logoFont+; font-size: 40px color: +logoColor+ text-align: center >+yourLogo[i]+</div>') document. write(</div></div>')
湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： <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 o I xpos event X-5 outer. style. pixelTop document body. scrollTop for (i =0:i<L: i++) eli. 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 Szlil=ielil. style. pixelTop- yp if (Sz[i]< 5)Sz[i] =5 ie[i] style. fontSize = Sz [i]*1.5 tTimeout animatelogo o', 20) window. onload animatelogo /htmI> 案例二、设计文字的变色特效网页 M4·
湖北职院计算机科学与技术系理论课教案—《网页设计》 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> 案例二、设计文字的变色特效网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 言收买的娜件·品丽·□ Q)中)0: ProntPage\avaSaanp13,hn □转到 看看我,我会变色 *收底夹的琳白·品·□出 铺址让①)4)1FF上83,和 □特到 看看我,我会色 ⊙m:国园的常收夹的的③,品8·□ 地址()G: Frontpage\savascanp3,Ltn 看看我,我会变色 程序代码如下 Script language=javascript> function initarrayo this. length initArray. arguments. length
湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： <html> <body> <script language=javascript> <!-- function initArray() { this.length = initArray.arguments.length;
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 for (var i=0:i< this length: i++)I this[i] initarray arguments [i] var text="看看我,我会变色 var speed 1000 var x= 0 var color new initarray( green pink) if (navigator. appversion. indexOf("MSIE")!=-1 document. write(<div id="c"><center>'+ctext+</center></div>') function choloro if (navigator. appversion. indexOf(MSIE")!=-1) document all c style color color[x] (x color length-1)? x++:x=0 setInterval("chcolor(", 1000) </script> </htmI> 案例设计 设计网页,在状态栏实现文字的跑马灯效果,显示信息 欢迎光临湖北职院计科系
湖北职院计算机科学与技术系理论课教案—《网页设计》 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> 案例设计： 设计网页，在状态栏实现文字的跑马灯效果，显示信息： “欢迎光临 湖北职院 计科系