查看此帖的完整版本:JavaScript实现下雪(Snow)效果阅读 4056 次

作者:羽忆 16/01/2005 18:40:12

JavaScript实现下雪(Snow)效果
<title>Happy New Year</title>

<body bgcolor="#ff3300" leftmargin="0" topmargin="0" onLoad="snow()" AAAD98>

<script language="JavaScript">

<!--

N = 100;

Y = new Array();

X = new Array();

S = new Array();

A = new Array();

B = new Array();

M = new Array();

V = (document.layers)?1:0;

iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;

iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;

for (i=0; i < N; i++){                                                                

Y[i]=Math.round(Math.random()*iH);

X[i]=Math.round(Math.random()*iW);

S[i]=Math.round(Math.random()*5+2);

A[i]=0;

B[i]=Math.random()*0.1+0.1;

M[i]=Math.round(Math.random()*1+1);

}

if (V){

for (i = 0; i < N; i++)

{document.write("<LAYER NAME=\'sn"+i+"\' LEFT=0 TOP=0 BGCOLOR=\'#ffffff\' CLIP=\'0,0,"+M[i]+","+M[i]+"\'></LAYER>")}

}

else{

document.write(\'<div style="position:absolute;top:0px;left:0px">\');

document.write(\'<div style="position:relative">\');

for (i = 0; i < N; i++)

{document.write(\'<div id="si" style="position:absolute;top:0;left:0;width:\'+M[i]+\';height:\'+M[i]+\';background:#ffffff;font-size:\'+M[i]+\'"></div>\')}

document.write(\'</div></div>\');

}

function snow(){

var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;

var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;

var T=(document.layers)?window.pageYOffset:document.body.scrollTop;

var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < N; i++){

sy=S[i]*Math.sin(90*Math.PI/180);

sx=S[i]*Math.cos(A[i]);

Y[i]+=sy;

X[i]+=sx;

if (Y[i] > H){

Y[i]=-10;

X[i]=Math.round(Math.random()*W);

M[i]=Math.round(Math.random()*1+1);

S[i]=Math.round(Math.random()*5+2);

}

if (V){document.layers[\'sn\'+i].left=X[i];document.layers[\'sn\'+i].top=Y[i]+T}

else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}

A[i]+=B[i];

}

setTimeout(\'snow()\',20);

}

//-->

</script>

代码2:

<body bgcolor=#ee3300>

<style>

.drop { position: absolute; width: 3;  filter: flipV(), flipH(); font-size: 40; color: #ffffff }

</style>

<script language="javascript">

snow = false;    // false-rain;   true-snow

snowsym = " * "  file://These are the symbols for each

rainsym = " * "  file://You can put images here.

howmany = 20     file://How many drops/snowflakes?

/**************Do not need to change anything below***********/

if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}

else{sym = rainsym; speed=30; drops=howmany; angle=6}

movex = -speed/angle; movey = speed; count = 0;

function moverain(){

for(move = 0; move < drops; move++){

xx[move]+=movex;  yy[move]+=mv[move];

hmm = Math.round(Math.random()*1);

if(xx[move] < 0){xx[move] = maxx+10;}

if(yy[move] > maxy){yy[move] = 10;}

drop[move].left = xx[move]

drop[move].top = yy[move]+document.body.scrollTop;

}setTimeout(\'moverain()\',\'1\')}

</script>

<script language="javascript">

if (document.all){

drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()

ly = "document.all[\\\'"; st = "\\\'].style"

for(make = 0; make < drops; make++){

document.write(\'<div id="drop\'+make+\'" class=drop>\'+sym+\'</div>\');

drop[make] = eval(ly+\'drop\'+make+st);

maxx = document.body.clientWidth-40

maxy = document.body.clientHeight-40

xx[make] = Math.random()*maxx;

yy[make] = -100-Math.random()*maxy;

drop[make].left = xx[make]

drop[make].top = yy[make]

mv[make] = (Math.random()*5)+speed/16;

drop[make].fontSize = (Math.random()*10)+20;

if(snow){col = \'white\'}else{col = \'white\'}

drop[make].color = col;

}

window.onload=moverain

}

</script>

</body>

代码3:

<body bgcolor=#ee3300>

<script LANGUAGE="JavaScript1.2">

<!--

var no = 25;

var speed = 10;

var snowflake = "http://www.cnbruce.com/blog/uploadimg/2004122215384750532.gif";

var ns4up = (document.layers) ? 1 : 0;

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;

var am, stx, sty;

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();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i < no; ++ i) {

dx[i] = 0;

xp[i] = Math.random()*(doc_width-50);

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

if (ns4up) {

if (i == 0) {

document.write("<layer name=\\"dot"+ i +"\\" left=\\"15\\" ");

document.write("top=\\"15\\" visibility=\\"show\\"><img src=\\"");

document.write(snowflake + "\\" border=\\"0\\"></layer>");

} else {

document.write("<layer name=\\"dot"+ i +"\\" left=\\"15\\" ");

document.write("top=\\"15\\" visibility=\\"show\\"><img src=\\"");

document.write(snowflake + "\\" border=\\"0\\"></layer>");

}

} 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;\\"><img src=\\"");

document.write(snowflake + "\\" border=\\"0\\"></div>");

} else {

document.write("<div id=\\"dot"+ i +"\\" style=\\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\\"><img src=\\"");

document.write(snowflake + "\\" border=\\"0\\"></div>");

}

}

}

function snowNS() { // Netscape main animation function

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", speed);

}

function snowIE() { // IE main animation function

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] > doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", speed);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

//-->

</script>

</body>

作者:小轲 17/01/2005 00:36:16


呵呵,这样复杂的代码还是拿来直接用好啦~

作者:羽忆 17/01/2005 12:14:54


这个我

作者:飘飞雪 18/01/2005 13:15:27


失真,

作者:dessesse 28/02/2005 11:45:09


直接用感觉不够畅快

javascript需要多少时间搞定~

大虾们曾经用过多少时间

作者:小轲 28/02/2005 12:09:35


我对java一窍不通

作者:shizi 04/03/2005 20:38:45


什么来的?


分页:[1]