【网页设计教案】JavaScript中图片特效网页设计.docVIP

教学项目二十二 JavaScript中图片特效网页设计 【教学内容】 讲解JavaScript中几种图片特效网页设计 【教学目的】 使学生学会设计网页的图片特效 【教学重点】 图片特效的处理思想 【教学难点】 理解图片特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．JavaScript 入门与提高 杨浩著 清华大学出版社 2．Internet 网页工场 Wittime工作室 重庆出版社 3．JavaScript从入门到精通 电脑报社出版 4．JavaScript编程起步 人民邮电出版社 【教学过程】 【新课】 案例设计： 通过不断刷新，六张图片可以交替出现 分析： 先复制1.jpg 、 2.jpg、 3.jpg、 4.jpg、 5.jpg、 6.jpg到站点主目录下，通过刷新获取当前时间的秒钟数的不同，显示不同的图片。 程序代码如下： html body script language=JavaScript var dt = new Date(); var hr = dt.getSeconds(); if (hr=10) { hr=1;} if((hr=20)(hr10)) { hr=2;} if ((hr=30)(hr20)) { hr=3;} if ((hr=40)(hr30)) { hr=7;} if ((hr=50)(hr40)) { hr=8;} if ((hr=60)(hr50)) { hr=9;} var msg=IMG SRC=+hr+.jpg; document.write(msg); /script /body /html 案例设计： 设计网页中的落叶效果。 程序代码如下： html head meta http-equiv=Content-Language content=zh-cn meta http-equiv=Content-Type content=text/html; charset=gb2312 meta name=GENERATOR content=Microsoft FrontPage 4.0 meta name=ProgId content=FrontPage.Editor.Document /head body SCRIPT LANGUAGE=JavaScript1.2 !-- Begin var no = 12; // number of hearts var speed = 6; // smaller number moves the hearts faster var heart = 69.gif; var flag; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); amx = new Array(); amy = new Array(); stx = new Array(); sty = new Array(); flag = new Array(); for (i = 0; i no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-30)+10; // set position variables yp[i] = Math.random()*doc_height; amy[i] = 12+ Math.random()*20; // set a