有点炫的JavaScript立体图片展示_图片特效特效

图片3D展示，鼠标晃动的时候图片跟着就动了，点击的时候会稍微放大一些，不同的角度会出现不一样的效果，JavaScript与CSS结合共同形成的效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>有点炫的立体图片展示</title>
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #fff;
		width: 100%;
		height: 100%;
	}
	#screen {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #fff;
	}
	#screen img {
		position: absolute;
		cursor: pointer;
		width: 0px;
		height: 0px;
		-ms-interpolation-mode:nearest-neighbor;
	}
	#bankImages {
		visibility: hidden;
	}
	#FPS {
		position: absolute;
		right: 5px;
		bottom: 5px;
		font-size: 10px;
		color: #666;
		font-family: verdana;
	}

</style>

/* ==== http://www.mb5u.com ==== */
	init : function (structure, FL, mouseZ, rx, ry) {
		this.screen.obj = document.getElementById('screen');
		this.screen.obj.onselectstart = function () { return false; }
		this.screen.obj.ondrag        = function () { return false; }
		this.mouseZ = mouseZ;
		this.camera.focalLength = FL;
		this.angle.rx = rx;
		this.angle.ry = ry;
		var i = 0, o;
		while( o = structure[i++] )
			this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
		this.resize();
		mouse.y = this.screen.y + this.screen.h;
		mouse.x = this.screen.x + this.screen.w;
		setInterval(tv.run, 16);
		setInterval(tv.dFPS, 1000);
	},
	resize : function () {
		var o = tv.screen.obj;
		if (o) {
			tv.screen.w = o.offsetWidth / 2;
			tv.screen.h = o.offsetHeight / 2;
			for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
				tv.screen.x += o.offsetLeft;
				tv.screen.y += o.offsetTop;
			}
		}
	},
	run : function () {
		tv.fps++;
		tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
		tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
		tv.camera.x.move(tv.camera.x.target, .025);
		tv.camera.y.move(tv.camera.y.target, .025);
		tv.angle.cx = Math.cos(tv.angle.x.position);
		tv.angle.sx = Math.sin(tv.angle.x.position);
		tv.angle.cy = Math.cos(tv.angle.y.position);
		tv.angle.sy = Math.sin(tv.angle.y.position);
		var i = 0, o;
		while( o = tv.O[i++] ) o.animate();
	},
	dFPS : function () {
		document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
		tv.fps = 0;
	}
}
var mouse = {
	x : 0,
	y : 0
}
document.onmousemove = function(e) {
	if (window.event) e = window.event;
	mouse.x = e.clientX;
	mouse.y = e.clientY;
	return false;
}
onload = function() {
	onresize = tv.resize;
	var img = document.getElementById('bankImages').getElementsByTagName('img');
	var structure = [];
	for (var i = -300; i <= 300; i += 120)
		for (var j = -300; j <= 300; j += 120)
			structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });
	tv.init(structure, 350, -200, .005, .0025);
}

</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
	<img alt="" src="http://p1.mb5u.com/texiao/1/20110225160512353.jpg">
</div>
<div id="FPS"></div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-12-01

[收藏][报错][返回列表]

有点炫的JavaScript立体图片展示_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些