js做的NB的3D旋转效果
2012-11-05 10:24
666 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wanna
tell her - interactive DHTML </title>
<meta http-equiv="imagetoolbar" content="no">
<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>
<script type="text/javascript">
/* ====
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);
}
</script>
</head>
<body>
<div id="screen"> </div>
<div id="bankImages">
<img alt="" src="图片地址">
</div>
<div id="FPS"> </div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Wanna
tell her - interactive DHTML </title>
<meta http-equiv="imagetoolbar" content="no">
<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>
<script type="text/javascript">
/* ====
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);
}
</script>
</head>
<body>
<div id="screen"> </div>
<div id="bankImages">
<img alt="" src="图片地址">
</div>
<div id="FPS"> </div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js项目--多张图片显示出3D的效果(360度旋转)
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
- 纯JS实现旋转图片3D展示效果
- JS实现3D图片旋转展示效果代码
- JS实现3D图片旋转展示效果代码
- css3 js实现3D旋转效果
- CSS3和js弄出来的3D旋转效果
- 纯JS实现旋转图片3D展示效果
- js 实现一个非常漂亮的3D立体旋转效果h5
- 【图片】3d鼠标拖动图片360°旋转动画效果 3dEye.js
- 3D效果的JS烟花背景特效
- jQuery 3D旋转图片轮播插件imageflow.js
- Android 3D旋转动画效果实现分解
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- Android自定义组件系列【11】——实现3D立体旋转效果
- 关于实现3D立体旋转效果的轮播视图
- HTML5 canvas 图片切换/图片轮播 贝塞尔曲线缓动 3D效果 (之) : slicease.js
- CSS3 3D旋转rotate效果实例介绍
- Androidb不使用OpenGL实现3D旋转效果
- iOS 使用 CATransform3D 处理 3D 影像、制做互动立体旋转的效果