试试代码高亮显示

最新推荐文章于 2024-10-06 00:20:23 发布

原创最新推荐文章于 2024-10-06 00:20:23 发布 · 201 阅读

CC 4.0 BY-SA版权

文章标签：

<!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>

本文章是别人的一个网页特效，本人只是测试下代码显示。