js代码超酷3D效果

fxz_2008

浏览: 274940 次
性别:
来自: 福建

最近访客更多访客>>

aa276174247

diaomcse110

tadbrad1

18483629676

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML JavaScript CSS J#Go

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>js代码超酷3D效果 Wanna tell her - interactive DHTML</title>
<FCK: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="http://www.96kb.com/images/logo.jpg" _fcksavedurl="http://www.96kb.com/images/logo.jpg"></div>
<div id="FPS"></div>
</body>
</html>

分享到：

js编写在网页中运行代码效果 | 24种页面切换效果详解

2009-11-17 10:04
浏览 1404
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js代码超酷3D效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js代码超酷3D效果

评论

发表评论

相关推荐

基于easyui的桌面app

基于easyui的桌面app

关于纯数字的字符串按ASCII压缩

js 对象排序

实现表单回车功能呢

f_alert 在指定元素后面弹出错误信息

JS格式化

js 实现HashMap

js 实现StringBuffer

JS 获取当前屏幕大小

3D照片墙

js判断上传文件大小

JS打造立体旋转的图片特效

jsp+js实现可排序表格

改善用户体验的alert提示效果

js禁止页面刷新后退

JS实现间歇无缝文字滚动

js图片滚动效果

js编写在网页中运行代码效果

24种页面切换效果详解

最近访客更多访客>>