湖北职业技术学院：《网页设计》第二十二讲 Javascrip中图片特效网页设计

教学项目二十二 Javascript中图片特效网页设计 基本内容】 讲解 Javascript中几种图片特效网页设计 教学要求】 学会设计网页的图片特效 案例设计: 通过不断刷新,网页中六张图片可以交替出现

教学项目二十二 JavaScript中图片特效网页设计 【基本内容】 讲解JavaScript中几种图片特效网页设计 【教学要求】 学会设计网页的图片特效 一、案例设计： 通过不断刷新，网页中六张图片可以交替出现

00F醇色⊙,金 06群脚色分,·當 加M扩 5D工: 0a0棵色合· 0=00meu仓⊙2· i4hahgnci

分析: 先复制jpg、2jp、3jpg、4jpg、5jpg、6jp到站点主 目录下,通过刷新获取当前时间的秒钟数的不同,显示不同的 图片。 程序代码如下:

分析： 先复制1.jpg 、 2.jpg、 3.jpg、 4.jpg、 5.jpg、 6.jpg到站点主 目录下，通过刷新获取当前时间的秒钟数的不同，显示不同的 图片。 程序代码如下：

if(hr50)) body> hr=9} var msg=". var dt= new DateD document. write(msg); var hr dt. getSecondsO if(hr hr=1;} html> if(hr10) hr=2;} if(hr20) hr=3;} if(hr30) hr=7;} if(hr40) hr=8;}

var dt = new Date(); var hr = dt.getSeconds(); 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);

二、案例设计 设计网页中的落叶效果 G:\网页设计教案\1Ek002,ht一夏 crosoft Internet Exp1ox 四回网 文件)编辑〔)查看收藏)工具)帮助Q 3份因回的户搬次收媒体,是,回過 地址@包6网页设计教案31j0hm 囝转到链接” 网页设计在线教程 HTML FRONTPAGE Dreamweaver Fireworks Photoshop COPYRIGH@2003北职院计科系学生网 Mailto:xgzy1jj@163.net □完毕 bIjie 色2记事本

二、案例设计： 设计网页中的落叶效果

程序代码如下: <SCRIPT LANGUAGE="Java Script I --Begin var no 12:// number of hearts var speed 6: //smaller number moves the hearts faster var heart=69.gif" var flag

程序代码如下： <!-- 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 selfinner Width doc_height= self. innerHeight I else if (ie4up)( doc_width document body. clientWidth doc height document body. clientHeight; dx= new Array xp new Array yp new Array0 amx= new Array0: amy new Array 0 stx new Array( sty new Array 0 flag new Array( 0;i<no;++b){ dx[]=0 //set coordinate variables

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[]= Math. random*doc_height am []=12+ Math. random(*20; //set amplitude variables amx[0= 10+ Math. random(*40 stx[i]=0.02+ Math. random0/10; //set step variables sty[]=0.7+ Math. random0; //set step variables flag[i] =(Math. random(>0.5)?1: 0 if (ns4up) //set layers if(i==0){ document. write( "") f else document. write(" ) y else if (ie4up) if(i==0) document. write("<div id=\dot"+i+"\" style=\"POSITION: " document. write "absolute: Z-INDEX: +i+ VISIBILITY:

xp[i] = Math.random()*(doc_width-30)+10; // set position variables yp[i] = Math.random()*doc_height; amy[i] = 12+ Math.random()*20; // set amplitude variables amx[i] = 10+ Math.random()*40; stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables flag[i] = (Math.random()>0.5)?1:0; if (ns4up) { // set layers if (i == 0) { document.write(""); } else { document.write(""); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document. write(" visible; TOP: 15px; LEFT: 15px;">"); y else document. write(" function snowNSO( / Netscape main animation function for(i=0; i doc_height-50)( xp[i]= 10+ Math. random0*(doc_width-amx[i]-30)

document.write("visible; TOP: 15px; LEFT: 15px;\">"); } else { document.write(""); } } } function snowNS() { // Netscape main animation function for (i = 0; i doc_height-50) { xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);

yp的=0 stx[]=0.02+ Math. random(/10 sty[i]=0.7+ Math. random flag[i]=(Math. random( Math. PI)( yp[]+=Math. abs(amy[i]*dx[i]); xp[]+=amx[i]*dx[] dx[]=0;

yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); flag[i]=(Math.random() Math.PI) { yp[i]+=Math.abs(amy[i]*dx[i]); xp[i]+=amx[i]*dx[i]; dx[i]=0;