<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>particle-6</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #fff; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #C img { position: absolute; } </style> <script type="text/javascript"> var object = new Array(); var xm = 0; var xmm = 0; var ym = 0; var ymm = 0; /* === pos camera ===*/ var Xo = 0; var Yo = 0; var Zo = -256; /* === screen origin === */ var Xc = 0; var Yc = 0; /* === setup === */ var nbp = 120; /* ====================== */ var ya = 0; var YA = 2; /* === particles animation === */ function anim(){ for(var i=0;i<nbp;i++){ o = object[i]; with(o){ vo++; if(vo > 256)vo = 1; x = vo*cra; y=Yc-Math.sin(vo/70)*Yc*1.5-20; z = vo*sra; } } } /* ========= 3D ================ */ function M3D(o, Xa, Ya, Za, E, L){ /* === trigo === */ cosZa = Math.cos(Za); sinZa = Math.sin(Za); cosYa = Math.cos(Ya); sinYa = Math.sin(Ya); cosXa = Math.cos(Xa); sinXa = Math.sin(Xa); /* === 3 x 3 Rotation matrix === */ R3D00 = cosZa * cosYa; R3D10 = sinZa * cosYa; R3D20 = -sinYa; R3D01 = cosZa * sinYa * sinXa - sinZa * cosXa; R3D11 = sinZa * sinYa * sinXa + cosXa * cosZa; R3D21 = sinXa * cosYa; R3D02 = cosZa * sinYa * cosXa + sinZa * sinXa; R3D12 = sinZa * sinYa * cosXa - cosZa * sinXa; R3D22 = cosXa * cosYa; for(var i in o){ /* ===== rotation ===== */ x3D = (R3D00 * o[i].x + R3D10 * o[i].y + R3D20 * o[i].z) * E; y3D = (R3D01 * o[i].x + R3D11 * o[i].y + R3D21 * o[i].z) * E; z3D = (R3D02 * o[i].x + R3D12 * o[i].y + R3D22 * o[i].z) * E; /* === 2D projection === */ X = Xc + Xo + Zo * (x3D-Xo) / (Zo-z3D); Y = Yc + Yo + Zo * (y3D-Yo) / (Zo-z3D); /* ===== HTML anim ===== */ with(o[i]){ PIC.left = Math.round(X)+'px'; PIC.top = Math.round(Y)+'px'; PIC.zIndex = Math.round(1000-z3D); if(Math.floor(vo/4)==vo/4)PIC.width = PIC.height = Math.round((-Zo-z3D*.5)/L)+'px'; } } } function Cobj(x,y,z,src){ o = document.createElement("img"); o.src = src; document.getElementById("C").appendChild(o); this.PIC = o.style; this.x = x; this.y = y; this.z = z; ra = Math.random()*2*Math.PI; this.sra = Math.sin(ra); this.cra = Math.cos(ra); this.vo = Math.round(Math.random()*127)+1; } /* === main loop === */ function main(){ ya += (xm - xmm) * .0002; YA += (ya *= .995); anim(); M3D(object,0,YA,0, 1, 6); Yo = (-ym*2+Yc)*.5; xmm = xm; ymm = ym; setTimeout("main()", 16); } onload = function(){ resize(); xm = Xc; ym = Yc / 2; /* === particles === */ for(i=0;i<nbp;i++){ if(i<nbp/4)s=document.getElementById("G").src; else s=document.getElementById("F").src; object[i] = new Cobj(0,0,0, s); } main(); } /* ===================== */ function resize() { Xc = document.body.offsetWidth * .5; Yc = document.body.offsetHeight * .5; } onresize = resize; /* === mouse events === */ document.onmousemove = function(e){ if (window.event) e = window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); } /* ===================== */ </script> </head> <body> <div id="C"></div> <div style="display:none"> <img id="F" src="blomst.gif"> <img id="G" src="blad.gif"> </div> </body> </html>
本文章是别人的一个网页特效,本人只是测试下代码显示。