[推荐]令人震撼的图片展示效果

<div class="top"></div>

<div class="bank">
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct37.jpg" title="Myselves" href="http://www.design-studio.cn/">My identity lies in not knowing who I am</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct60.jpg" title="Discoveries" href="http://www.design-studio.cn/">...are made by not following instructions</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/sf53.jpg" title="Nothing" href="http://www.design-studio.cn/">...can come between us</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/sf48.jpg" title="New life" href="http://www.design-studio.cn/">Here you come!</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct81.jpg" title="Optimists" href="http://www.design-studio.cn/">They don't know all the facts yet</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct134.jpg" title="Empathy" href="http://www.design-studio.cn/">Emotional intimacy</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct41.jpg" title="Much work" href="http://www.design-studio.cn/">...remains to be done before we can announce our total failure to make any progress</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct75.jpg" title="System error" href="http://www.design-studio.cn/">Errare Programma Est</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/bl201.jpg" title="Nonexistance" href="http://www.design-studio.cn/">There's no such thing</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct137.jpg" title="Inside" href="http://www.design-studio.cn/">I抦 now trapped, without hope of escape or rescue</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct65.jpg" title="E-Slaves" href="http://www.design-studio.cn/">The World is flat</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/or105.jpg" title="l0v3" href="http://www.design-studio.cn/">1 l0v3 j00 - f0r3v3r</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct139.jpg" title="T minus zero" href="http://www.design-studio.cn/">111 111 111 x 111 111 111 = 12345678987654321</a> 
 <a rel="http://preview.zcool.com.cn/code/js/04/1/ct27.jpg" title="The End" href="http://www.design-studio.cn/">...has not been written yet</a> 
</div>
<div class="text">

<div class="title">Loading</div>

<div class="legend">Please wait...</div>
</div>

<div class="scrollbar">
 <img class="track" src="http://preview.zcool.com.cn/code/js/04/1/sb.gif" alt=""> <img class="arrow-left" src="http://preview.zcool.com.cn/code/js/04/1/sl.gif" alt=""> <img class="arrow-right" src="http://preview.zcool.com.cn/code/js/04/1/sr.gif" alt=""> <img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt=""></div>
</div>

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

下载地址已修正：http://downsc.zcool.com.cn/code/js/04_images_box_zcool.com.cn.rar

<div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>

<div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>

<div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
</div>
<div id="images" style="visibility:hidden">
 <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg"> <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg"> <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg"> <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg"> <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg"></div>

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

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

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

/* html positioning */
 position = function(obj, x, y, w, h)
 {
 	with(obj.style){
 		left = Math.round(x) + "px";
 		top = Math.round(y) + "px";
 		width = Math.round(w) + "px";
 		height = Math.round(h) + "px";
 	}
 }

/* create object instances */
 function Cobj(parent, N, x, y, w, h)
 {
 	this.zoomed = (parent ? 0 : 1);
 	obj[K] = this;
 	this.K = K ++;
 	this.parent = parent;
 	this.children = [];
 	this.x = x;
 	this.y = y;
 	this.w = w;
 	this.h = h;
 	this.vx = 0;
 	this.vy = 0;
 	this.vw = 0;
 	this.vh = 0;
 	this.xi = 0;
 	this.yi = 0;
 	this.wi = 0;
 	this.hi = 0;
 	this.x1 = 0;
 	this.y1 = 0;
 	this.w1 = 0;
 	this.h1 = 0;
 	this.x0 = 0;
 	this.y0 = 0;
 	this.w0 = 0;
 	this.h0 = 0;
 	this.imgsrc = img[N];

/* create HTML elements */
 	this.img = document.createElement("img");
 	this.img.src = this.imgsrc.src;
 	this.img.obj = this;
 	scr.appendChild(this.img);
 	this.spa = document.createElement("span");
 	this.spa.style.cursor = "pointer";
 	this.spa.obj = this;
 	scr.appendChild(this.spa);
 	if (parent) parent.children.push(this);

/* Flickr */
 	this.blink = function()
 	{
 		with(this)
 		{
 			position(spa, x0, y0, w0, h0);
 			spa.style.visibility = "visible";
 			img.style.cursor = "pointer";
 			setTimeout("obj[" + K + "].spa.style.visibility='hidden'", 128);
 		}
 	}

/* display image & children */
 	this.display = function(zoomed)
 	{
 		with(this)
 		{
 			position(img, x0, y0, w0, h0);
 			img.style.visibility = "visible";
 			if (parent && ! zoomed)
 			{
 				blink();
 				Ov = img;
 			}
 		}
 	}

/* init zoom */
 	this.init_zoom = function(d)
 	{
 		with(this)
 		{
 			w1 = imgsrc.width;
 			h1 = imgsrc.height;
 			x1 = (W - w1) / 2;
 			y1 = (H - h1) / 2;
 			x0 = (parent ? x + parent.x1 : (W - w1) / 2);
 			y0 = (parent ? y + parent.y1 : (H - h1) / 2);
 			w0 = (parent ? w : w1);
 			h0 = (parent ? h : h1);
 			xi = d > 0 ? x0 : x1;
 			yi = d > 0 ? y0 : y1;
 			wi = d > 0 ? w0 : w1;
 			hi = d > 0 ? h0 : h1;
 			vx = d * (x1 - x0) / SP;
 			vy = d * (y1 - y0) / SP;
 			vw = d * (w1 - w0) / SP;
 			vh = d * (h1 - h0) / SP;
 			parent.vx = d * ((x1 - (x * w1 / w0)) - parent.x1) / SP;
 			parent.vy = d * ((y1 - (y * h1 / h0)) - parent.y1) / SP;
 			parent.vw = vw * (parent ? (parent.w1 / w) : 0);
 			parent.vh = vh * (parent ? (parent.h1 / h) : 0);
 		}
 	}

/* animate zoom in - out */
 	this.zoom = function()
 	{
 		with(this)
 		{
 			xi += vx;
 			yi += vy;
 			wi += vw;
 			hi += vh;

parent.xi += parent.vx;
 			parent.yi += parent.vy;
 			parent.wi += parent.vw;
 			parent.hi += parent.vh;

position(img, xi, yi, wi, hi);
 			position(parent.img, parent.xi, parent.yi, parent.wi, parent.hi);

if ((zoomed == 0 && wi > w0 - vw) || (zoomed == 1 && wi < w1 - vw))
 			{
 				setTimeout("obj[" + K + "].zoom()", 16);
 			}
 			else
 			{
 				dz = false;
 				for (var i in Oz.children)
 				{
 					Oz.children[i].init_zoom();
 					Oz.children[i].display(false, false);
 				}
 			}
 		}
 	}

/* mouse events */
 	this.img.onmouseover = function()
 	{
 		if (this != Ov) with(this.obj) if (parent && ! zoomed && ! dz) blink();
 		Ov = this;
 		return false;
 	}

this.img.onclick = function()
 	{
 		with(this.obj)
 		{
 			if (parent && !dz && imgsrc.complete)
 			{
 				if (zoomed == 1)
 				{
 					/* zoom out */
 					Oz = this.obj.parent;
 					zoomed = 0;
 					init_zoom( -1);
 					for (var i in children) children[i].img.style.visibility = "hidden";
 					parent.zoomed = 1;
 					dz = true;
 					zoom();
 				}
 				else if (zoomed == 0)
 				{
 					/* zoom in */
 					Oz = this.obj;
 					img.style.cursor = "crosshair";
 					zoomed = 1;
 					init_zoom(1);
 					for (var i in parent.children)
 					{
 						if (this.obj != parent.children[i])
 							parent.children[i].img.style.visibility = "hidden";
 					}
 					parent.zoomed = -1;
 					dz = true;
 					zoom();
 				}
 			}
 		}
 		return false;
 	}

this.spa.onmousedown = function()
 	{
 		this.style.visibility="hidden";
 		this.obj.img.onclick();
 		return false;
 	}
 }

/* initialization */
 /* must start after the first image is loaded */
 function starter()
 {
 	scr = document.getElementById("screen");
 	img = document.getElementById("images").getElementsByTagName("img");
 	W = parseInt(scr.style.width);
 	H = parseInt(scr.style.height);

/* ==== tree-zoom ==== */
 	// new Cobj(parent, image, x, y, w, h)
 	O = new Cobj(0, 0, 0, 0, 0, 0);
 		O0 = new Cobj(O, 1, 127, 98, 181, 134);
 			O1 = new Cobj(O0, 2, 158, 150, 85, 155);
 				O11 = new Cobj(O1, 4, 136, 98, 80, 196);
 					O111 = new Cobj(O11, 5, 20, 154, 70, 57);
 						O1111 = new Cobj(O111, 6, 161, 137, 154, 76);
 					O112 = new Cobj(O11, 11, 155, 154, 70, 57);
 						O1121 = new Cobj(O112, 12, 273, 116, 49, 72);
 			O2 = new Cobj(O0, 3, 281, 150, 90, 154);
 				O21 = new Cobj(O2, 7, 35, 295, 133, 82);
 					O211 = new Cobj(O21, 15, 316, 183, 20, 36);
 				O22 = new Cobj(O2, 8, 179, 295, 127, 79);
 					O221 = new Cobj(O22, 13, 132, 84, 54, 102);
 						O2211 = new Cobj(O221, 14, 6, 234, 69, 50);
 							O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);
 				O23 = new Cobj(O2, 9, 92, 148, 138, 76);
 					O231 = new Cobj(O23, 10, 249, 106, 83, 65);
 						O2311 = new Cobj(O231, 0, 120, 87, 57, 59);

/* display */
 	O.init_zoom(1);
 	O.display(true);
 	for (var i in O.children)
 	{
 		O.children[i].init_zoom(1);
 		O.children[i].display(true);
 	}
 }
 //-->
 </script>

<div style="position:absolute;left:50%;top:50%">

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

本文转自
http://bbs.51js.com/thread-77249-1-1.html

学步园

[推荐]令人震撼的图片展示效果

作者: curator

书签

最新文章New

本站推荐

返回首页