湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十三 JavaScript文字特效网页设计 【教学内容】 讲解 JavaScript中几种文字特效网页设计 【教学目的】 使学生学会设计文字的特效 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步》 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计文字绕圈旋转特效网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十三 JavaScript 文字特效网页设计 【教学内容】 讲解 JavaScript 中几种文字特效网页设计 【教学目的】 使学生学会设计文字的特效 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．> 人民邮电出版社 【教学过程】 【新课】 一、案例设计： 设计文字绕圈旋转特效网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 G小鬥疯设计教k以19t:ht黑一黑 crosoft Int 文件￠)辑正)查看收凛0)工具∝)帮助0 ⊙园的O抛常古收夹的琳特份③,图·回 地址q)包G:F设计数案5kNsm119, 转到报” 学计 程序代码如下 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 ( ') for (i=0 document. write(+yourLogo[i]+') document. write(')
湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： 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(''); for (i = 0; i '+yourLogo[i]+''); } document.write('');
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 function Mouse o I xpos event X-5 outer. style. pixelTop document body. scrollTop for (i =0:i 案例二、设计文字的变色特效网页 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 案例二、设计文字的变色特效网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 言收买的娜件·品丽·□ Q)中)0: ProntPage\avaSaanp13,hn □转到 看看我,我会变色 *收底夹的琳白·品·□出 铺址让①)4)1FF上83,和 □特到 看看我,我会色 ⊙m:国园的常收夹的的③,品8·□ 地址()G: Frontpage\savascanp3,Ltn 看看我,我会变色 程序代码如下 Script language=javascript> function initarrayo this. length initArray. arguments. length
湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： <!-- function initArray() { this.length = initArray.arguments.length;
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 for (var i=0:i'+ctext+') 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) 案例设计 设计网页,在状态栏实现文字的跑马灯效果,显示信息 欢迎光临湖北职院计科系
湖北职院计算机科学与技术系理论课教案—《网页设计》 for (var i = 0; i '+ctext+''); } function chcolor() { if (navigator.appVersion.indexOf("MSIE") != -1) { document.all.c.style.color = color[x]; } (x 案例设计： 设计网页，在状态栏实现文字的跑马灯效果，显示信息： “欢迎光临 湖北职院 计科系
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 a G: \FrontPage\javaSsamp\ soft Internet Explorer 文件①)编辑①)查看①收藏④)工具①)帮助0 ⊙后·国哈按☆收的嫩的,品, 地址①)句]6: AFrontPsg“ avsSsanp\4h 分转到链接” 欢迎光临湖北职院计科系 程序代码如下 var msg="欢迎光临湖北职院计科系 var interval 300: function Scroll[ window status =msg substring(0, seg+1) 0} window. setTimeout("Scroll(:, interval 【课后小结】 通过本次课学习,学会对 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 ); } 【课后小结】 通过本次课学习，学会对 JavaScript 源代码进行修改，实现不同的文字特效
湖北职晚计算机科学与技术亲理论课教案一《网页设计》
湖北职院计算机科学与技术系理论课教案—《网页设计》