<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0013)about:internet -->
<html>
<head>
<title>html5制作3D图片三维图片墙（心）</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
html{overflow:hidden;}
body{margin:0px; padding:0px; width:100%;height:100%; background-color:transparent;}
#screen{position:absolute;left:0px;top:50px; width:700px; height:450px;}
#screen img{position:absolute; cursor:pointer; visibility:hidden; width:0px; height:0px;}
#screen .tvover{border:2px solid #876; opacity:1; filter:alpha(opacity=100);}
#screen .tvout{border:2px solid #fff; opacity:0.7;}
#bankImages{display:none;}
.clear{clear:both; height:0px;}
</style>
<script type="text/javascript">
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed)
{
this.position += (target - this.position) * speed;
}
}
var tv = {
O : [],
screen : {},
grid : {
size : 11,
borderSize : 0,
zoomed : false
},
angle : {
x : new Library.ease(),
y : new Library.ease()
},
camera : {
x : new Library.ease(),
y : new Library.ease(),
zoom : new Library.ease(),
focalLength : 950
},
init : function ()
{
this.screen.obj = document.getElementById('screen');
var img = document.getElementById('bankImages').getElementsByTagName('img');
this.screen.obj.onselectstart = function () { return false; }
this.screen.obj.ondrag = function () { return false; }
var ni = 0;
var n = (tv.grid.size / 2) - .5;
for (var y = -n; y <= n; y++)
{
for (var x = -n; x <= n; x++)
{
var o = document.createElement('img');
var i = img[(ni++) % img.length];
o.className = 'tvout';
o.src = i.src;
tv.screen.obj.appendChild(o);
o.point3D = {
x : x,
y : y,
z : new Library.ease()
};
o.point2D = {};
o.ratioImage = 1;
tv.O.push(o);
o.onmouseover = function ()
{
if (!tv.grid.zoomed)
{
if (tv.o)
{
tv.o.point3D.z.target = 0;
tv.o.className = 'tvout';
}
this.className = 'tvover';
this.point3D.z.target = -.5;
tv.o = this;
}
}
o.onclick = function ()
{
if (!tv.grid.zoomed)
{
tv.camera.x.target = this.point3D.x;
tv.camera.y.target = this.point3D.y;
tv.camera.zoom.target = tv.screen.w * 1.25;
tv.grid.zoomed = this;
} else {
if (this == tv.grid.zoomed){
tv.camera.x.target = 0;
tv.camera.y.target = 0;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
tv.grid.zoomed = false;
}
}
}
o.calc = function ()
{
this.point3D.z.move(this.point3D.z.target, .5);
var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
var z = this.point3D.z.position * tv.camera.zoom.position;
var xy = tv.angle.cx * y - tv.angle.sx * z;
var xz = tv.angle.sx * y + tv.angle.cx * z;
var yz = tv.angle.cy * xz - tv.angle.sy * x;
var yx = tv.angle.sy * xz + tv.angle.cy * x;
this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
this.point2D.x = yx * this.point2D.scale;
this.point2D.y = xy * this.point2D.scale;
this.point2D.w = Math.round(
Math.max(
0,
this.point2D.scale * tv.camera.zoom.position * .8
)
);
if (this.ratioImage > 1)
this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
else
{
this.point2D.h = this.point2D.w;
this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
}
}
o.draw = function ()
{
if (this.complete)
{
if (!this.loaded)
{
if (!this.img)
{
this.img = new Image();
this.img.src = this.src;
}
if (this.img.complete)
{
this.style.visibility = 'visible';
this.ratioImage = this.img.width / this.img.height;
this.loaded = true;
this.img = false;
}
}
this.style.left = Math.round(
this.point2D.x * this.point2D.scale +
tv.screen.w - this.point2D.w * .5
) + 'px';
this.style.top = Math.round(
this.point2D.y * this.point2D.scale +
tv.screen.h - this.point2D.h * .5
) + 'px';
this.style.width = this.point2D.w + 'px';
this.style.height = this.point2D.h + 'px';
this.style.borderWidth = Math.round(
Math.max(
this.point2D.w,
this.point2D.h
) * tv.grid.borderSize * .01
) + 'px';
this.style.zIndex = Math.floor(this.point2D.scale * 100);
}
}
}
}
tv.resize();
mouse.y = tv.screen.y + tv.screen.h;
mouse.x = tv.screen.x + tv.screen.w;
tv.run();
},
resize : function ()
{
var o = tv.screen.obj;
tv.screen.w = o.offsetWidth / 2;
tv.screen.h = o.offsetHeight / 2;
tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
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.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
tv.camera.zoom.move(tv.camera.zoom.target, .05);
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);
for (var i = 0, o; o = tv.O[i]; i++)
{
o.calc();
o.draw();
}
setTimeout(tv.run, 32);
}
}
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;
}
</script>
</head>
<body>
<div style="height:1000px; width:100%;position:relative;">
<div id="screen"></div>
<div id="bankImages">
<!--1--> <!-- mask.png图片为不可见层，不能修改 -->
<img alt="" src="images/mask.png">
<img alt="" src="images/mask.png">
<img alt="" src="images/1.jpg">
<img alt="" src="images/2.jpg">
<img alt="" src="images/mask.png">
<img alt="" src="images/mask.png">
<img alt="" src="images/mask.png">
<img alt="" src="images/3.jpg">
<img alt="" src="images/4.jpg">
<img alt="" src="images/mask.png">
<img alt="" src="images/mask.png">
<!--2-->
<img alt="" src="images/mask.png">
<img alt="" src="images/1.jpg">
<img alt="" src="images/2.jpg">
<img alt="" src="images/3.jpg">
<img alt="" src="images/4.jpg">
<img alt="" src="images/mask.png">
<img alt="" src="images/5.jpg">
<img alt="" src="images/6.jpg">
<img alt="" src="images/7.jpg">
<img alt="" src="images/8.jpg">
<img alt="" src="images/mask.png">
<!--3-->
<img alt="" src="images/1.jpg">
<img alt="" src="images/2.jpg">
<img alt="" src="images/3.jpg">
<img alt="" src="images/4.jpg">
<img alt="" src="images/5.jpg">
<img alt="" src="images/6.jpg">
<img alt="" src="images/7.jpg">
<img alt="" src="images/8.jpg">
<img alt="" src="images/9.jpg">
<img alt="" src="images/10.jpg">
<img alt="" src="i
html5实现心形的3D照片墙.rar
4星 · 超过85%的资源 需积分: 49 102 浏览量
2019-07-10
17:46:26
上传
评论 4
收藏 517KB RAR 举报 
xinphotowall.rar （13个子文件） 
srcfans.com html5实现心形的3D照片墙特效 images 
8.jpg 44KB 2.jpg 58KB 1.jpg 39KB 6.jpg 40KB 3.jpg 37KB
mask.png 188B 5.jpg 53KB 11.jpg 51KB 4.jpg 53KB 10.jpg 55KB 9.jpg 40KB 7.jpg 44KB
index.html 11KB资源评论
iphone20082021-05-10不是我想要的，不值
