网页设计 (21).doc

湖北职院计算机科学与技术系理论课教案网页设计 教学项目二十二 JavaScript中图片特效网页设计【教学内容】讲解JavaScript中几种图片特效网页设计【教学目的】 使学生学会设计网页的图片特效【教学重点】 图片特效的处理思想【教学难点】 理解图片特效的处理方法【教学方式】讨论式、案例分析式、练习式相结合【教学参考】1 杨浩著 清华大学出版社2 Wittime工作室 重庆出版社3 电脑报社出版4 人民邮电出版社【教学过程】【新课】一、 案例设计：通过不断刷新，六张图片可以交替出现 分析：先复制1.jpg 、 2.jpg、 3.jpg、 4.jpg、 5.jpg、 6.jpg到站点主目录下，通过刷新获取当前时间的秒钟数的不同，显示不同的图片。程序代码如下： var dt = new Date();var hr = dt.getSeconds();if (hr=10) hr=1;if(hr10) hr=2; if (hr20) hr=3; if (hr30) hr=7;if (hr40) hr=8;if (hr50) hr=9;var msg=;document.write(msg); 二、 案例设计：设计网页中的落叶效果。程序代码如下：!- Beginvar no = 12; / number of heartsvar speed = 6; / smaller number moves the hearts fastervar heart = 69.gif;var flag;var ns4up = (document.layers) ? 1 : 0; / browser sniffervar ie4up = (document.all) ? 1 : 0;var dx, xp, yp; / coordinate and position variablesvar am, stx, sty; / amplitude and step variablesvar 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 0.5)?1:0;if (ns4up) / set layersif (i = 0) document.write(); else document.write(); elseif (ie4up) if (i = 0) document.write(); else document.write();function snowNS() / Netscape main animation functionfor (i = 0; i doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;flagi=(Math.random() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.layersdot+i.top = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.layersdot+i.left = xpi + amxi*dxi;setTimeout(snowNS(), speed);function snowIE() / IE main animation functionfor (i = 0; i doc_height-50) xpi = 10+ Math.random()*(doc_width-amxi-30);ypi = 0;stxi = 0.02 + Math.random()/10;styi = 0.7 + Math.random();flagi=(Math.random() Math.PI) ypi+=Math.abs(amyi*dxi);xpi+=amxi*dxi;dxi=0;flagi=!flagi;document.alldot+i.style.pixelTop = ypi + amyi*(Math.abs(Math.sin(dxi)+dxi);document.alldot+i.style.pixelLeft = xpi + amxi*dxi;setTimeout(snowIE(), speed);if (ns4up) snowNS(); else if (ie4up) snowIE();/ End - 网页设计在线教程 FLASH HTML FRONTPAGE Dreamweaver CSS Fireworks Photoshop COPYRIGHT 2003湖北职院计科系学生网 Mailto: 三、 案例设计：设计背景图片下滚，文字上滚的网页特效。程序代码如下： /Author:redriver var index =15 text = new Array(14); text0 =     偶然 text1 = text2 =  汪国真 text3 = text4 =我是天空里的一片云， text5 =偶尔投影在你的波心 text6 =你不必诧异, text7 =更无须欢喜text8 =在转瞬间消灭了踪影。text9 =text10 =你我相逢在黑暗的海上，text11 =你有你的，我有我的，方向； text12 =你记得也好， text13 =最好你忘掉， text14 =在这交汇时互放的光亮！ document.write (); for (i=0;iindex;i+) document.write (); document.write (texti + ); document.write (); documetn.write(); maxSize) backgroundOffset = 0;bgObject.style.backgroundPo