打印

一个代码非常简洁的Javascript 3D相册

macrowaa [楼主]

初级会员

帖子: 48
体力: 195
威望: 0
当前: 广东深圳
离线: 60 天

1^# 大中小发表于 2008-1-7 21:51

老外那里拿来的,有兴趣的学习学习...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>autumn II - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		position: absolute;
		margin: 0px;
		padding: 0px;
		background: #111;
		width: 100%;
		height: 100%;
	}
	#screen {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #000;
	}
	#screen img { 
		position: absolute;
		cursor: pointer;
		visibility: hidden;
		width: 0px;
		height: 0px;
	}
	#screen .tvover {
		border: solid #876;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#screen .tvout {
		border: solid #fff;
		opacity: 0.7;
	}
	#bankImages {
		display: none;
	}
</style>
<script type="text/javascript">
// =============================================================
//                 ===== photo 3D =====
// script written by Gerard Ferrandez - October 21th, 2007
// http://www.dhteumeuleu.com
// =============================================================
/* ==== library ==== */
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 : [],
	screen : {},
	grid : {
		size       : 4,  // 4x4 grid
		borderSize : 6,  // borders size
		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 : 750 // camera Focal Length
	},
	
	/* ==== init script ==== */
	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; }
		/* ==== create images grid ==== */
		var ni = 0;
		var n = (tv.grid.size / 2) - .5;
		for (var y = -n; y <= n; y++)
		{
			for (var x = -n; x <= n; x++)
			{
				/* ==== create HTML image element ==== */
				var o = document.createElement('img');
				var i = img[(ni++) % img.length];
				o.className = 'tvout';
				o.src = i.src;
				tv.screen.obj.appendChild(o);
				/* ==== 3D coordinates ==== */
				o.point3D = {
					x  : x,
					y  : y,
					z  : new Library.ease()
				};
				/* ==== push object ==== */
				o.point2D = {};
				o.ratioImage = 1;
				tv.O.push(o);
				/* ==== on mouse over event ==== */
				o.onmouseover = function ()
				{
					if (!tv.grid.zoomed)
					{
						if (tv.o)
						{
							/* ==== mouse out ==== */
							tv.o.point3D.z.target = 0;
							tv.o.className = 'tvout';
						}
						/* ==== mouse over ==== */
						this.className = 'tvover';
						this.point3D.z.target = -.5;
						tv.o = this;
					}
				}
				/* ==== on click event ==== */
				o.onclick = function ()
				{
					if (!tv.grid.zoomed)
					{
						/* ==== zoom in ==== */
						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){
							/* ==== zoom out ==== */
							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;
						}
					}
				}
				/* ==== 3D transform function ==== */
				o.calc = function ()
				{
					/* ==== ease mouseover ==== */
					this.point3D.z.move(this.point3D.z.target, .5);
					/* ==== assign 3D coords ==== */
					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;
					/* ==== perform rotations ==== */
					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;
					/* ==== 2D transformation ==== */
					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
					                   )
					                 );
					/* ==== image size ratio ==== */
					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);
					}
				}
				/* ==== rendering ==== */
				o.draw = function ()
				{
					if (this.complete)
					{
						/* ==== paranoid image load ==== */
						if (!this.loaded)
						{
							if (!this.img)
							{
								/* ==== create internal image ==== */
								this.img = new Image();
								this.img.src = this.src;
							}
							if (this.img.complete)
							{
								/* ==== get width / height ratio ==== */
								this.style.visibility = 'visible';
								this.ratioImage = this.img.width / this.img.height;
								this.loaded = true;
								this.img = false;
							}
						}
						/* ==== HTML rendering ==== */
						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);
					}
				}
			}
		}
		/* ==== start script ==== */
		tv.resize();
		mouse.y = tv.screen.y + tv.screen.h;
		mouse.x = tv.screen.x + tv.screen.w;
		tv.run();
	},
	
	/* ==== resize window ==== */
	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;
		}
	},
	/* ==== main loop ==== */
	run : function ()
	{
		/* ==== motion ease ==== */
		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);
		/* ==== 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 all images ==== */
		for (var i = 0, o; o = tv.O[i]; i++)
		{
			o.calc();
			o.draw();
		}
		/* ==== loop ==== */
		setTimeout(tv.run, 32);
	}
}
/* ==== 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;
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="bankImages">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wi23.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt06.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt47.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt16.jpg">
	
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt43.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt19.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt27.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt46.jpg">
	
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt14.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt21.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt35.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt48.jpg">
	
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt55.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt40.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt53.jpg">
	<img alt="" src="http://www.webkey.cn/demo/docs/photo3d/images/wt25.jpg">
	
</div>
<script type="text/javascript">
	/* ==== start script ==== */
	onresize = tv.resize;
	tv.init();
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

这里可以查看演示效果

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

HTML建店ecomeweb.com

TOP

西部数码VPS主机1G内存仅266元

willko

中级会员

帖子: 214
体力: 403
威望: 0
当前: 广东深圳
离线: 22 天

2^# 大中小发表于 2008-1-7 22:06

。。。好卡。。。

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

p7oo89

新手上路

帖子: 1
体力: 7
威望: 0
离线: 541 天

3^# 大中小发表于 2008-1-7 23:01

太叼了

很好,很强大.我的第一贴

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

occult

中级会员

帖子: 134
体力: 291
威望: 0
当前: 广东中山
离线: 1 天

4^# 大中小发表于 2008-1-7 23:27

点击后图片应该放大至原尺寸大小才对，放得太大了。

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

xkang

银牌会员

帖子: 854
体力: 1217
威望: 1
当前: 上海普陀
离线: 73 天

专长 网页设计,前端制作,策划

5^# 大中小发表于 2008-1-8 08:47

呵呵，效果不错

因为专业，所以选择..技术群：11162579

TOP

annybaal

新手上路

帖子: 11
体力: 28
威望: 0
离线: 5 天

6^# 大中小发表于 2008-1-8 09:06

呵呵
还不错
留着

TOP

danirkl

初级会员

帖子: 33
体力: 57
威望: 0
当前: 辽宁沈阳
离线: 33 天

专长 JS,JAVA,MySQL

7^# 大中小发表于 2008-1-8 09:33

代码值得一度哈

TOP

chinahappy

初级会员

帖子: 82
体力: 106
威望: 0
当前: 浙江金华
离线: 32 天

8^# 大中小发表于 2008-1-8 09:42

根据鼠标位置调空图片位置

毋法尽悟

TOP

EVA01

初级会员

帖子: 37
体力: 87
威望: 0
离线: 11 天

9^# 大中小发表于 2008-1-8 09:50

很好。很强大！

TOP

YKAI

苹果王

高级会员

认证
帖子: 513
体力: 504
威望: 1
当前: 浙江杭州

专长 UI,JS,PHP

10^# 大中小发表于 2008-1-8 10:20

是满不错的，就是平时很少用上。
一直从事体力活，哈哈

风了

TOP

8434461

中级会员

帖子: 135
体力: 227
威望: 0
离线: 1 天

11^# 大中小发表于 2008-1-8 10:31

这个代码怎么不能二次选择啊很强

TOP

realism

高级会员

帖子: 311
体力: 584
威望: 0
当前: 广东广州
离线: 4 天

专长 网页设计,平面,前端制作

12^# 大中小发表于 2008-1-8 10:39

效果很cool,不过太占用cpu了

测试站点

TOP

ccfit

新手上路

帖子: 15
体力: 38
威望: 0
离线: 5 天

13^# 大中小发表于 2008-1-8 10:47

看着头晕，而且不实用。

TOP

lanxuehai

蓝雪海

中级会员

帖子: 312
体力: 354
威望: 0
当前: 北京海淀区
离线: 1 天

专长 前端制作,PHP,AS

14^# 大中小发表于 2008-1-14 11:12

感觉不错，支持一个！

Let's go home!

TOP

kxm1984

中级会员

帖子: 194
体力: 342
威望: 0

15^# 大中小发表于 2008-1-14 12:31

realism 不说CPU，俺还没注意

打开看效果的饿时候，俺CPU一直是40%到80%之间跳 ( AMD CPU IE6 )，不过运行还是流畅的！！！不过效果的确不错

在奔腾4CPU，FF，和netscape环境下，那效果就是卡的要死，CPU一直是100%，不过在奔4，IE7下运行还算流畅，但是CPU还是很高

我靠不同浏览器，不同CPU还有这么大的差别！！这个效果，电脑贫民是爱不起来的！！

俺没有双芯的CPU，没测试！

[ 本帖最后由 kxm1984 于 2008-1-14 12:39 编辑 ]

TOP

radKing

新手上路

帖子: 5
体力: 9
威望: 0
当前: 浙江杭州
离线: 388 天

16^# 大中小发表于 2008-1-14 13:26

晃啊晃……

TOP

skybot

size

钻石会员

帖子: 3068
体力: 7098
威望: 6
当前: 上海长宁
离线: 1 天

专长 JS,C#,MSSQL

17^# 大中小发表于 2008-1-14 13:28

看着头晕，啊占1个U,2个U达到51%

http://www.qlili.com 个人站帮点啊

TOP

hubird

中级会员

帖子: 314
体力: 268
威望: 0
离线: 44 天

18^# 大中小发表于 2008-1-14 16:20

看起来头晕，估计是程序高手写的，但是除了自我满足没有其他用途
t2050u 1.5G内存 cpu占用30%-48%

TOP

MrShan

罐装曲奇

高级会员

帖子: 344
体力: 738
威望: 0
当前: 北京海淀区
离线: 13 天

专长 网页设计,前端制作,美编

19^# 大中小发表于 2008-1-15 07:00

好强悍!!!

TOP

thehoedos

hoedo

中级会员

帖子: 216
体力: 257
威望: 0
当前: 广东广州

20^# 大中小发表于 2008-1-15 09:14

很好，很强大！

TOP

aidxj

新手上路

帖子: 10
体力: 25
威望: 0
离线: 43 天

21^# 大中小发表于 2008-1-17 17:52

爽,,,实在是太美妙了!!!!

TOP

aultoale

番茄红了

高级会员

认证
帖子: 1414
体力: 769
威望: 30
当前: 广东广州

专长 JS,PHP,项目管理

22^# 大中小发表于 2008-1-17 18:57

不错，很COOL哇

EGP Framework

TOP

cly84920

当当当

初级会员

帖子: 203
体力: 121
威望: 4
当前: 北京海淀区
离线: 1 天

专长 前端制作,JS,PHP

23^# 大中小发表于 2008-1-17 19:28

太强大了。而且用起来也太方便了。

TOP

zhouyuling909

小林设计

初级会员

帖子: 84
体力: 72
威望: 0
当前: 湖南衡阳
离线: 4 天

专长 网页设计,UI,Flash

24^# 大中小发表于 2008-1-17 19:46

牛，就是看着有点头晕呀。

http://www.z990.com

TOP

shore

中级会员

帖子: 70
体力: 242
威望: 0

专长 网页设计,ASP

25^# 大中小发表于 2008-1-17 21:22

强悍~还算流畅P4 IE6 CPU70%

TOP

protossfans

中级会员

帖子: 156
体力: 311
威望: 0
当前: 四川成都
离线: 257 天

26^# 大中小发表于 2008-1-17 21:37

hehehe

TOP

nnzz

愿闻其详

中级会员

帖子: 134
体力: 261
威望: 0
当前: 江苏南京
离线: 21 天

27^# 大中小发表于 2008-1-17 22:04

是不错啊，看起来很流畅，可听大家说占CPU，一看，还真是占CPU

TOP

sgw2004

高级会员

帖子: 335
体力: 589
威望: 1
离线: 66 天

28^# 大中小发表于 2008-1-17 22:14

确实CPU50%以上

冬天的蟋蟀

TOP

xpoqx

银牌会员

帖子: 876
体力: 1179
威望: 0
当前: 辽宁沈阳
离线: 6 天

29^# 大中小发表于 2008-2-29 12:59

我得天呀！！！！

我f了！！！！！！！太强了1！！！！

博客:http://blog.sina.com.cn/xpoqx

TOP

RestlessDream

初级会员

帖子: 39
体力: 83
威望: 0
当前: 广东广州

30^# 大中小发表于 2008-3-30 17:44

太占CPU了,卡到不成!

TOP