CSS+JS打造绝对经典的滑轮新闻显示特效 dn001 2009-06-21 08:20:37 <!-- website:http://www.knowsky.com --> <!-- bbs:http://bbs.knowsky.com --> <!-- 完整的HTML代码如下 --> <html> <head> <title>网页页面中真实的宇宙效果演示[网页特效]s</title> <meta name="Author" content="http://www.knowsky.com"> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;} img {position:absolute;left:-1000;} .borderTop {position:absolute;left:0;top:0;width:100%;height:10%;background:#333;z-index:1;} .borderBottom {position:absolute;left:0;top:90%;width:100%;height:10%;background:#333;z-index:1;} </style> <script type="text/javascript"><!-- // =========================================================== // http://www.knowsky.com // =========================================================== window.onerror = new Function("return true") G1D = new Object(); screen.bufferDepth = 16; o = xm = ym = M = sx = sy = sz = 0; function r(v,x){ if (v>x) v-=x; else if (v<0) v+=x; return v; } document.onmousemove = function(e){ if (window.event) e = window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); M = 100; } function resize() { nx = document.body.offsetWidth; ny = document.body.offsetHeight; } onresize = resize; G1D.creaTe = function(img,w,h,Z){ this.O = document.createElement("img"); this.O.src = img.src; SF.appendChild(this.O); this.Z = Z; this.w = w; this.h = h; this.x2D = 0; this.y2D = 0; this.x3D = Math.round(Math.random() * 100); this.y3D = Math.round(Math.random() * 100); this.z3D = Math.round(Math.random() * 100); } G1D.creaTe.prototype.aNim = function(sx,sy,sz) { with(this){ with(O.style){ wp = 8+(w * (100 - z3D)) * Z; hp = 8+(h * (100 - z3D)) * Z; lp = x2D - (wp * .5); tp = y2D - (hp * .5); if(lp>-wp && lp<nx && tp>-hp && tp<ny){ width = wp; height = hp; left = lp; top = tp; zIndex = Math.round(-z3D + wp); } else left = -1000; } x3D=r(x3D += sx,100); y3D=r(y3D += sy,100); z3D=r(z3D += sz,100); x2D=(nx * .5) + (((x3D - 50) * nx) / z3D); y2D=(ny * .5) + (((y3D - 50) * ny) / z3D); } } G1D.obZ = function(N,img,Z) { this.N = N; this.o = new Array(); this.k = 0; w = img.width; h = img.height; for(i=0;i<N;i++) this.o[i] = new G1D.creaTe(img,w,h,Z); } G1D.obZ.prototype.ouiiiin = function(){ this.k += .1; sz = Math.sin(this.k * .1); if(M>0){ sx = ((nx * .5) - xm) / (nx * .25); sy = ((ny * .5) - ym) / (ny * .25); } else { sx += Math.cos(this.k / 4) * .01; sy += Math.sin(this.k / 8) * .01; } for(i=0;i<this.N;i++)this.o[i].aNim(sx,sy,sz); } function mainloop(){ M--; o.ouiiiin(); setTimeout("mainloop();",16); } onload = function (){ SF = document.getElementById("starfield"); resize(); xm = nx/2; ym = ny/2; o = new G1D.obZ(100,document.getElementById("planet"),.015); mainloop(); } //--> </script> </head> <body> <div class="borderTop"></div> <div class="borderBottom"></div> <div id="starfield" style="position:absolute;left:0;top:0;z-index:2;"></div> <img id=planet src="http://www.knowsky.com/upfiles/20050411/20050411020714_planet.gif"> </body> </html>
