流畅3D立体图片相册特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是流畅3D立体图片相册特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流畅3D立体图片相册特效 </title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<script src="js/zzsc.js"></script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages"><img alt="程序员设计师联盟淘宝店" src="images/zzsc.png"> </div>
<div id="FPS"></div>
</body>
</html>

JS代码(zzsc.js):

/* ==== Easing function ==== */
var Library ={
}
;
	Library.ease = function (){
	this.target = 0;
	this.position = 0;
	this.move = function (target,speed){
	this.position += (target - this.position) * speed;
}
}
var tv ={
	/* ==== variables ==== */
O:[],fps:0,screen:{
}
,angle:{
	x:new Library.ease(),y:new Library.ease()}
,camera:{
	x:new Library.ease(),y:new Library.ease()}
,create3DHTML:function (i,x,y,z,sw,sh){
	/* ==== create HTML image element ==== */
var o = document.createElement('img');
	o.src = i.src;
	tv.screen.obj.appendChild(o);
	/* ==== 3D coordinates ==== */
o.point3D ={
	x:x,y:y,z:new Library.ease(),sw:sw,sh:sh,w:i.width,h:i.height}
;
	o.point3D.z.target = z;
	/* ==== push object ==== */
o.point2D ={
}
;
	tv.O.push(o);
	/* ==== on mouse over event ==== */
o.onmouseover = function (){
	if (this != tv.o){
	this.point3D.z.target = tv.mouseZ;
	tv.camera.x.target = this.point3D.x;
	tv.camera.y.target = this.point3D.y;
	if (tv.o) tv.o.point3D.z.target = 0;
	tv.o = this;
}
return false;
}
/* ==== on mousedown event ==== */
o.onmousedown = function (){
	if (this == tv.o){
	if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
	else{
	tv.o = false;
	this.onmouseover();
}
}
}
/* ==== main 3D function ==== */
o.animate = function (){
	/* ==== 3D coordinates ==== */
var x = this.point3D.x - tv.camera.x.position;
	var y = this.point3D.y - tv.camera.y.position;
	this.point3D.z.move(this.point3D.z.target,this.point3D.z.target ? .15:.08);
	/* ==== rotations ==== */
var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
	var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
	var yz = tv.angle.cy * xz - tv.angle.sy * x;
	var yx = tv.angle.sy * xz + tv.angle.cy * x;
	/* ==== 2D transform ==== */
var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
	x = yx * scale;
	y = xy * scale;
	var w = Math.round(Math.max(0,this.point3D.w * scale * this.point3D.sw));
	var h = Math.round(Math.max(0,this.point3D.h * scale * this.point3D.sh));
	/* ==== HTML rendering ==== */
var o = this.style;
	o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
	o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
	o.width = w + 'px';
	o.height = h + 'px';
	o.zIndex = 10000 + Math.round(scale * 1000);
}
}
,/* ==== init script ==== */
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;
	/* ==== create objects ==== */
var i = 0,o;
	while( o = structure[i++] )this.create3DHTML(o.img,o.x,o.y,o.z,o.sw,o.sh);
	/* ==== start script ==== */
this.resize();
	mouse.y = this.screen.y + this.screen.h;
	mouse.x = this.screen.x + this.screen.w;
	/* ==== loop ==== */
setInterval(tv.run,16);
	setInterval(tv.dFPS,1000);
}
,/* ==== resize window ==== */
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;
}
}
}
,/* ==== main loop ==== */
run:function (){
	tv.fps++;
	/* ==== motion ease ==== */
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);
	/* ==== angles sin and cos ==== */
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);
	/* ==== loop through images ==== */
var i = 0,o;
	while( o = tv.O[i++] ) o.animate();
}
,/* ==== trace frames per seconds ==== */
dFPS:function (){
	document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
	tv.fps = 0;
}
}
/* ==== global mouse position ==== */
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;
}
/* ==== starting script ==== */
onload = function(){
	onresize = tv.resize;
	/* ==== build grid ==== */
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}
);
	/* ==== let's go ==== */
tv.init(structure,350,-200,.005,.0025);
}

CSS代码(zzsc.css):

@charset "utf-8";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;}

附件:下载该文件资源,减少时间成本(增值服务)