请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 一个代码非常简洁的Javascript 3D相册

发新帖

查看: 16247|回复: 63

一个代码非常简洁的Javascript 3D相册 [复制链接]

macrowaa　楼主

帖子: 48
体力: 417
威望: 0
居住地: 广东省深圳市

发表于 2008-1-7 21:51:22 |显示全部楼层

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

<!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

西部数码顶级域名注册商39元抢注！

使用道具举报

帖子: 222
体力: 423
威望: 0
居住地: 广东省深圳市

发表于 2008-1-7 22:06:03 |显示全部楼层

。。。好卡。。。

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 1
体力: 12
威望: 0

发表于 2008-1-7 23:01:03 |显示全部楼层

太叼了

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

使用道具举报

帖子: 137
体力: 612
威望: 0
居住地: 广东省中山市

发表于 2008-1-7 23:27:04 |显示全部楼层

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

使用道具举报

帖子: 848
体力: 2432
威望: 1

发表于 2008-1-8 08:47:46 |显示全部楼层

呵呵，效果不错

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

使用道具举报

帖子: 11
体力: 81
威望: 0

发表于 2008-1-8 09:06:55 |显示全部楼层

呵呵
还不错
留着

使用道具举报

帖子: 33
体力: 119
威望: 0
居住地: 辽宁省沈阳市

发表于 2008-1-8 09:33:31 |显示全部楼层

代码值得一度哈

小店5miao.taobao.com

使用道具举报

银牌会员 

帖子: 418
体力: 1140
威望: 0
居住地: 浙江省杭州市

发表于 2008-1-8 09:42:02 |显示全部楼层

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

912ni.com 真爱墙

使用道具举报

帖子: 37
体力: 92
威望: 0

发表于 2008-1-8 09:50:02 |显示全部楼层

很好。很强大！

使用道具举报

YKAI　

苹果王

银牌会员 

帖子: 531
体力: 1099
威望: 1
居住地: 浙江省杭州市

发表于 2008-1-8 10:20:39 |显示全部楼层

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

使用道具举报

帖子: 144
体力: 448
威望: 0

发表于 2008-1-8 10:31:32 |显示全部楼层

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

使用道具举报

帖子: 344
体力: 1293
威望: 0
居住地: 广东省广州市

发表于 2008-1-8 10:39:13 |显示全部楼层

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

使用道具举报

帖子: 97
体力: 276
威望: 0
居住地: 云南省昆明市

发表于 2008-1-8 10:47:51 |显示全部楼层

看着头晕，而且不实用。

使用道具举报

蓝雪海

钻石会员 

帖子: 452
体力: 6696
威望: 0

发表于 2008-1-14 11:12:17 |显示全部楼层

感觉不错，支持一个！

Let's go home!

使用道具举报

银牌会员 

帖子: 275
体力: 2260
威望: 0

发表于 2008-1-14 12:31:57 |显示全部楼层

realism 不说CPU，俺还没注意

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

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

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

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

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

使用道具举报

帖子: 5
体力: 14
威望: 0
居住地: 浙江省杭州市

发表于 2008-1-14 13:26:51 |显示全部楼层

晃啊晃……

使用道具举报

size

钻石会员 

帖子: 3236
体力: 12466
威望: 7

发表于 2008-1-14 13:28:31 |显示全部楼层

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

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

使用道具举报

帖子: 314
体力: 543
威望: 0

发表于 2008-1-14 16:20:03 |显示全部楼层

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

使用道具举报

罐装曲奇

银牌会员 

帖子: 443
体力: 1550
威望: 0
居住地: 山东省烟台市

发表于 2008-1-15 07:00:33 |显示全部楼层

好强悍!!!

使用道具举报

hoedo

帖子: 538
体力: 789
威望: 0
居住地: 广东省广州市

发表于 2008-1-15 09:14:55 |显示全部楼层

很好，很强大！

使用道具举报

帖子: 9
体力: 55
威望: 0

发表于 2008-1-17 17:52:28 |显示全部楼层

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

使用道具举报

番茄红了

金牌会员 

帖子: 1560
体力: 4013
威望: 41
居住地: 广东省广州市

发表于 2008-1-17 18:57:23 |显示全部楼层

不错，很COOL哇

使用道具举报

当当当

帖子: 209
体力: 286
威望: 4

发表于 2008-1-17 19:28:48 |显示全部楼层

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

使用道具举报

zhouyuling909　

小林设计

中级会员 

帖子: 99
体力: 295
威望: 0

发表于 2008-1-17 19:46:13 |显示全部楼层

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

http://www.z990.com

使用道具举报

帖子: 74
体力: 532
威望: 0

发表于 2008-1-17 21:22:37 |显示全部楼层

强悍~还算流畅P4 IE6 CPU70%

使用道具举报

帖子: 155
体力: 316
威望: 0
居住地: 四川省成都市

发表于 2008-1-17 21:37:05 |显示全部楼层

hehehe

使用道具举报

nnzz　

愿闻其详

帖子: 152
体力: 360
威望: 0
居住地: 江苏省南京市

发表于 2008-1-17 22:04:27 |显示全部楼层

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

使用道具举报

帖子: 337
体力: 599
威望: 1

发表于 2008-1-17 22:14:00 |显示全部楼层

确实CPU50%以上

冬天的蟋蟀

使用道具举报

帖子: 1149
体力: 2626
威望: 2
居住地: 辽宁省沈阳市

发表于 2008-2-29 12:59:36 |显示全部楼层

我得天呀！！！！

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

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

使用道具举报

RestlessDream　

司徒正美

帖子: 70
体力: 105
威望: 4
居住地: 广东省广州市

发表于 2008-3-30 17:44:38 |显示全部楼层

太占CPU了,卡到不成!

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 08:46 , Processed in 0.149253 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部