js做的NB的3D旋转效果

转载 2012年11月05日 10:24:40
<!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); 
= yx * scale; 
= xy * scale; 
var w = Math.round(Math.max(0this.point3D.w * scale * this.point3D.sw)); 
var h = Math.round(Math.max(0this.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>

相关文章推荐

css3 js实现3D旋转效果

用css3和js实现3D旋转的效果,主要使用到css3 transform中的一些属性:perspective,rotate,translate。下面主要介绍一些transform中的属性的效果和作用...

纯js脚本1k大小的3D玫瑰, NB

http://sd.csdn.net/a/20120209/311621.html 导语:前年圣诞节上,西班牙程序员Roman Cortes带来了用纯javascript脚本编写的神...
  • faral
  • faral
  • 2012-02-10 09:56
  • 472

3d旋转效果

  • 2013-10-22 22:52
  • 552KB
  • 下载

matrix 实现动画3D旋转效果

首先看下效果: 大概效果就是这样 如果是你需要的 就继续往下看  如果是简单实现一个那就容易了 那也不需要用到matrix 代码如下: AnimatorSet animatorSetC...

flash 3d图片旋转木马效果

  • 2013-08-06 10:30
  • 212KB
  • 下载

Android实现3D旋转效果

下面的示例是在Android中实现图片3D旋转的效果。   实现3D效果一般使用OpenGL,但在Android平台下可以不直接使用OpenGL,而是使用Camera实现,Camera中原...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)