以文本方式查看主题 - 泥客论坛(十几年前的回忆) (http://www.yaoke.cn/bbs/index.asp) -- ☆网页制作☆ (http://www.yaoke.cn/bbs/list.asp?boardid=81) ---- JavaScript实现下雪(Snow)效果 (http://www.yaoke.cn/bbs/dispbbs.asp?boardid=81&id=7191) |
-- 作者:羽忆 -- 发布时间:2005/1/16 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> |
-- 作者:小轲 -- 发布时间:2005/1/17 0:36:16 -- 呵呵,这样复杂的代码还是拿来直接用好啦~ |
-- 作者:羽忆 -- 发布时间:2005/1/17 12:14:54 -- 这个我 ![]() |
-- 作者:飘飞雪 -- 发布时间:2005/1/18 13:15:27 -- 失真, |
-- 作者:dessesse -- 发布时间:2005/2/28 11:45:09 -- 直接用感觉不够畅快 javascript需要多少时间搞定~ 大虾们曾经用过多少时间 |
-- 作者:小轲 -- 发布时间:2005/2/28 12:09:35 -- 我对java一窍不通 ![]() |
-- 作者:shizi -- 发布时间:2005/3/4 20:38:45 -- 什么来的? |