教程集 > 脚本编程 > javascript > 正文图片相册JS效果

图片相册JS效果

发布时间：2023-07-04 编辑：jiaochengji.com

教程集为您提供图片相册JS效果等资源，欢迎您收藏本站，我们将为您提供最新的图片相册JS效果资源

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title></title>  <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">  var Library = {};  Library.ease = function () {  	this.target = 0;  	this.position = 0;  	this.move = function (target, speed)  	{  		this.position  = (target - this.position) * speed;  	}  }  var tv = {  	O : [],  	screen : {},  	grid : {  		size       : 4,    		borderSize : 6,    		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   	},  	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; }  		var ni = 0;  		var n = (tv.grid.size / 2) - .5;  		for (var y = -n; y <= n; y  )  		{  			for (var x = -n; x <= n; x  )  			{  				var o = document.createElement('img');  				var i = img[(ni  ) % img.length];  				o.className = 'tvout';  				o.src = i.src;  				tv.screen.obj.appendChild(o);  				o.point3D = {  					x  : x,  					y  : y,  					z  : new Library.ease()  				};  				o.point2D = {};  				o.ratioImage = 1;  				tv.O.push(o);  				o.onmouseover = function ()  				{  					if (!tv.grid.zoomed)  					{  						if (tv.o)  						{  							tv.o.point3D.z.target = 0;  							tv.o.className = 'tvout';  						}  						this.className = 'tvover';  						this.point3D.z.target = -.5;  						tv.o = this;  					}  				}  				o.onclick = function ()  				{  					if (!tv.grid.zoomed)  					{  						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){  							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;  						}  					}  				}  				o.calc = function ()  				{  					this.point3D.z.move(this.point3D.z.target, .5);  					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;  					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;  					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  					                   )  					                 );  					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);  					}  				}  				o.draw = function ()  				{  					if (this.complete)  					{  						if (!this.loaded)  						{  							if (!this.img)  							{  								this.img = new Image();  								this.img.src = this.src;  							}  							if (this.img.complete)  							{  								this.style.visibility = 'visible';  								this.ratioImage = this.img.width / this.img.height;  								this.loaded = true;  								this.img = false;  							}  						}  						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);  					}  				}  			}  		}  		tv.resize();  		mouse.y = tv.screen.y   tv.screen.h;  		mouse.x = tv.screen.x   tv.screen.w;  		tv.run();  	},  	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;  		}  	},  	run : function ()  	{  		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);  		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);  		for (var i = 0, o; o = tv.O[i]; i  )  		{  			o.calc();  			o.draw();  		}  		setTimeout(tv.run, 32);  	}  }  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://p1.jquerycn.cn/111cn/0/6/1474575928_8084.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/8/2/1474575954_8915.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/2/6/1474575956_2242.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/d/5/1474575957_2038.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/7/c/1474575958_7197.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/f/8/1474575958_4110.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/8/1474575959_5852.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/f/b/1474575960_2883.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/1/c/1474575961_1001.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/8/3/1474575961_3300.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575962_5429.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575963_5609.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575964_2033.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575965_9916.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575965_1117.jpg">  	<img alt="" src="http://p1.jquerycn.cn/111cn/9/a/1474575966_4522.jpg">  </div>  <script type="text/javascript">  	onresize = tv.resize;  	tv.init();  </script>  </body>  </html>

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

您可能感兴趣的文章：
非常个性js相册图片展示效果代码
 超漂亮js相册图片展示效果
 jQuery相册插件 AD Gallery
Touch Gallery
仿discuz 论坛 LightBox图片相册查看代码！
Minimit Gallery
WordPress 照片lightbox效果的运用几点
 jQuery图片相册插件 Mosaiqy
jQuery相册幻灯片插件 Slider Kit
jQuery相册展示插件 Supersized

上一篇：JS焦点图联动效果代码下一篇：js拖动效果

[关闭]

图片相册JS效果

最近更新

浏览排行