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

最新推荐文章于 2026-03-17 01:04:21 发布

原创最新推荐文章于 2026-03-17 01:04:21 发布 · 1.0k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

网页制作js

通过巧妙的HTML和JavaScript实现，此博客展示了如何创建令人震撼的图片展示效果，包括平滑缩放和平移等交互特性。

导读：
　　

令人震撼的图片展示效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>1</title>
 <meta http-equiv="imagetoolbar" content="no">
 <style type="text/css">
 	html {
 		overflow: hidden;
 	}
 	body {
 		margin: 0px;
 		padding: 0px;
 		background: #000;
 		width: 100%;
 		height: 100%;
 	}
 	#imageFlow {
 		position: absolute;
 		width: 100%;
 		height: 80%;
 		left: 0%;
 		top: 10%;
 		background: #000;
 	}
 	#imageFlow .diapo {
 		position: absolute;
 		left: -1000px;
 		cursor: pointer;
 		-ms-interpolation-mode: nearest-neighbor;
 	}
 	#imageFlow .link {
 		border: dotted #fff 1px;
 		margin-left: -1px;
 		margin-bottom: -1px;
 	}
 	#imageFlow .bank {
 		visibility: hidden;
 	}
 	#imageFlow .top {
 		position: absolute;
 		width: 100%;
 		height: 40%;
 		background: #181818;
 	}
 	#imageFlow .text {
 		position: absolute;
 		left: 0px;
 		width: 100%;
 		bottom: 16%;
 		text-align: center;
 		color: #FFF;
 		font-family: verdana, arial, Helvetica, sans-serif;
 		z-index: 1000;
 	}
 	#imageFlow .title {
 		font-size: 0.9em;
 		font-weight: bold;
 	}
 	#imageFlow .legend {
 		font-size: 0.8em;
 	}
 	#imageFlow .scrollbar {
 		position: absolute;
 		left: 10%;
 		bottom: 10%;
 		width: 80%;
 		height: 16px;
 		z-index: 1000;
 	}
 	#imageFlow .track {
 		position: absolute;
 		left: 1%;
 		width: 98%;
 		height: 16px;
 		filter: alpha(opacity=30);
 		opacity: 0.3;
 	}
 	#imageFlow .arrow-left {
 		position: absolute;
 	}
 	#imageFlow .arrow-right {
 		position: absolute;
 		right: 0px;
 	}
 	#imageFlow .bar {
 		position: absolute;
 		height: 16px;
 		left: 25px;
 	}
 </style>
 
 <script type="text/javascript">
 
 var imf = function () {
 	var lf = 0;
 	var instances = [];
 	function getElementsByClass (object, tag, className) {
 		var o = object.getElementsByTagName(tag);
 		for ( var i = 0, n = o.length, ret = []; i < n; i++)
 			if (o[i].className == className) ret.push(o[i]);
 		if (ret.length == 1) ret = ret[0];
 		return ret;
 	}
 	function addEvent (o, e, f) {
 		if (window.addEventListener) o.addEventListener(e, f, false);
 		else if (window.attachEvent) r = o.attachEvent('on' + e, f);
 	}
 	function createReflexion (cont, img) {
 		var flx = false;
 		if (document.createElement("canvas").getContext) {
 			flx = document.createElement("canvas");
 			flx.width = img.width;
 			flx.height = img.height;
 			var context = flx.getContext("2d");
 			context.translate(0, img.height);
 			context.scale(1, -1);
 			context.drawImage(img, 0, 0, img.width, img.height);
 			context.globalCompositeOperation = "destination-out";
 			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
 			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
 			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
 			context.fillStyle = gradient;
 			context.fillRect(0, 0, img.width, img.height * 2);
 		} else {
 			/* ---- DXImageTransform ---- */
 			flx = document.createElement('img');
 			flx.src = img.src;
 			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
 			 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
 							 (img.height * .25) + ')';
 		}
 		/* ---- insert Reflexion ---- */
 		flx.style.position = 'absolute';
 		flx.style.left = '-1000px';
 		cont.appendChild(flx);
 		return flx;
 	}
 	/* //////////// ==== ImageFlow Constructor ==== //////////// */
 	function ImageFlow(oCont, size, zoom, border) {
 		this.diapos = [];
 		this.scr = false;
 		this.size = size;
 		this.zoom = zoom;
 		this.bdw = border;
 		this.oCont = oCont;
 		this.oc = document.getElementById(oCont);
 		this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
 		this.text = getElementsByClass(this.oc, 'div', 'text');
 		this.title = getElementsByClass(this.text, 'div', 'title');
 		this.legend = getElementsByClass(this.text, 'div', 'legend');
 		this.bar = getElementsByClass(this.oc, 'img', 'bar');
 		this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
 		this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
 		this.bw = this.bar.width;
 		this.alw = this.arL.width - 5;
 		this.arw = this.arR.width - 5;
 		this.bar.parent = this.oc.parent = this;
 		this.arL.parent = this.arR.parent = this;
 		this.view = this.back = -1;
 		this.resize();
 		this.oc.onselectstart = function () { return false; }
 		/* ---- create images ---- */
 		var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
 		this.NF = img.length;
 		for (var i = 0, o; o = img[i]; i++) {
 			this.diapos[i] = new Diapo(this, i,
 										o.rel,
 										o.title || '- ' + i + ' -',
 										o.innerHTML || o.rel,
 										o.href || ',
 										o.target || '_self'
 			);
 		}
 		/* ==== add mouse wheel events ==== */
 		if (window.addEventListener)
 			this.oc.addEventListener('DOMMouseScroll', function(e) {
 				this.parent.scroll(-e.detail);
 			}, false);
 		else this.oc.onmousewheel = function () {
 			this.parent.scroll(event.wheelDelta);
 		}
 		/* ==== scrollbar drag N drop ==== */
 		this.bar.onmousedown = function (e) {
 			if (!e) e = window.event;
 			var scl = e.screenX - this.offsetLeft;
 			var self = this.parent;
 			/* ---- move bar ---- */
 			this.parent.oc.onmousemove = function (e) {
 				if (!e) e = window.event;
 				self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
 				self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
 				if (self.view != self.back) self.calc();
 				return false;
 			}
 			/* ---- release scrollbar ---- */
 			this.parent.oc.onmouseup = function (e) {
 				self.oc.onmousemove = null;
 				return false;
 			}
 			return false;
 		}
 		/* ==== right arrow ==== */
 		this.arR.onclick = this.arR.ondblclick = function () {
 			if (this.parent.view < this.parent.NF - 1)
 				this.parent.calc(1);
 		}
 		/* ==== Left arrow ==== */
 		this.arL.onclick = this.arL.ondblclick = function () {
 			if (this.parent.view > 0)
 				this.parent.calc(-1);
 		}
 	}
 	/* //////////// ==== ImageFlow prototype ==== //////////// */
 	ImageFlow.prototype = {
 		/* ==== targets ==== */
 		calc : function (inc) {
 			if (inc) this.view += inc;
 			var tw = 0;
 			var lw = 0;
 			var o = this.diapos[this.view];
 			if (o && o.loaded) {
 				/* ---- reset ---- */
 				var ob = this.diapos[this.back];
 				if (ob && ob != o) {
 					ob.img.className = 'diapo';
 					ob.z1 = 1;
 				}
 				/* ---- update legend ---- */
 				this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
 				this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
 				/* ---- update hyperlink ---- */
 				if (o.url) {
 					o.img.className = 'diapo link';
 					window.status = 'hyperlink: ' + o.url;
 				} else {
 					o.img.className = 'diapo';
 					window.status = ';
 				}
 				/* ---- calculate target sizes & positions ---- */
 				o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
 				var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
 				var x = x0 + o.w1 + this.bdw;
 				for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
 					if (o.loaded) {
 						o.x1 = x;
 						o.w1 = (this.ht / o.r) * this.size;
 						x += o.w1 + this.bdw;
 						tw += o.w1 + this.bdw;
 					}
 				}
 				x = x0 - this.bdw;
 				for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
 					if (o.loaded) {
 						o.w1 = (this.ht / o.r) * this.size;
 						o.x1 = x - o.w1;
 						x -= o.w1 + this.bdw;
 						tw += o.w1 + this.bdw;
 						lw += o.w1 + this.bdw;
 					}
 				}
 				/* ---- move scrollbar ---- */
 				if (!this.scr && tw) {
 					var r = (this.ws - this.alw - this.arw - this.bw) / tw;
 					this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
 				}
 				/* ---- save preview view ---- */
 				this.back = this.view;
 			}
 		},
 		/* ==== mousewheel scrolling ==== */
 		scroll : function (sc) {
 			if (sc < 0) {
 				if (this.view < this.NF - 1) this.calc(1);
 			} else {
 				if (this.view > 0) this.calc(-1);
 			}
 		},
 		/* ==== resize ==== */
 		resize : function () {
 			this.wh = this.oc.clientWidth;
 			this.ht = this.oc.clientHeight;
 			this.ws = this.scrollbar.offsetWidth;
 			this.calc();
 			this.run(true);
 		},
 		/* ==== move all images ==== */
 		run : function (res) {
 			var i = this.NF;
 			while (i--) this.diapos[i].move(res);
 		}
 	}
 	/* //////////// ==== Diapo Constructor ==== //////////// */
 	Diapo = function (parent, N, src, title, text, url, target) {
 		this.parent = parent;
 		this.loaded = false;
 		this.title = title;
 		this.text = text;
 		this.url = url;
 		this.target = target;
 		this.N = N;
 		this.img = document.createElement('img');
 		this.img.src = src;
 		this.img.parent = this;
 		this.img.className = 'diapo';
 		this.x0 = this.parent.oc.clientWidth;
 		this.x1 = this.x0;
 		this.w0 = 0;
 		this.w1 = 0;
 		this.z1 = 1;
 		this.img.parent = this;
 		this.img.onclick = function() { this.parent.click(); }
 		this.parent.oc.appendChild(this.img);
 		/* ---- display external link ---- */
 		if (url) {
 			this.img.onmouseover = function () { this.className = 'diapo link';	}
 			this.img.onmouseout = function () { this.className = 'diapo'; }
 		}
 	}
 	/* //////////// ==== Diapo prototype ==== //////////// */
 	Diapo.prototype = {
 		/* ==== HTML rendering ==== */
 		move : function (res) {
 			if (this.loaded) {
 				var sx = this.x1 - this.x0;
 				var sw = this.w1 - this.w0;
 				if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
 					/* ---- paint only when moving ---- */
 					this.x0 += sx * .1;
 					this.w0 += sw * .1;
 					if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
 						/* ---- paint only visible images ---- */
 						this.visible = true;
 						var o = this.img.style;
 						var h = this.w0 * this.r;
 						/* ---- diapo ---- */
 						o.left = Math.round(this.x0) + 'px';
 						o.bottom = Math.floor(this.parent.ht * .25) + 'px';
 						o.width = Math.round(this.w0) + 'px';
 						o.height = Math.round(h) + 'px';
 						/* ---- reflexion ---- */
 						if (this.flx) {
 							var o = this.flx.style;
 							o.left = Math.round(this.x0) + 'px';
 							o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
 							o.width = Math.round(this.w0) + 'px';
 							o.height = Math.round(h) + 'px';
 						}
 					} else {
 						/* ---- disable invisible images ---- */
 						if (this.visible) {
 							this.visible = false;
 							this.img.style.width = '0px';
 							if (this.flx) this.flx.style.width = '0px';
 						}
 					}
 				}
 			} else {
 				/* ==== image onload ==== */
 				if (this.img.complete && this.img.width) {
 					/* ---- get size image ---- */
 					this.iw = this.img.width;
 					this.ih = this.img.height;
 					this.r = this.ih / this.iw;
 					this.loaded = true;
 					/* ---- create reflexion ---- */
 					this.flx = createReflexion(this.parent.oc, this.img);
 					if (this.parent.view < 0) this.parent.view = this.N;
 					this.parent.calc();
 				}
 			}
 		},
 		/* ==== diapo onclick ==== */
 		click : function () {
 			if (this.parent.view == this.N) {
 				/* ---- click on zoomed diapo ---- */
 				if (this.url) {
 					/* ---- open hyperlink ---- */
 					window.open(this.url, this.target);
 				} else {
 					/* ---- zoom in/out ---- */
 					this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
 					this.parent.calc();
 				}
 			} else {
 				/* ---- select diapo ---- */
 				this.parent.view = this.N;
 				this.parent.calc();
 			}
 			return false;
 		}
 	}
 	/* //////////// ==== public methods ==== //////////// */
 	return {
 		/* ==== initialize script ==== */
 		create : function (div, size, zoom, border) {
 			/* ---- instanciate imageFlow ---- */
 			var load = function () {
 				var loaded = false;
 				var i = instances.length;
 				while (i--) if (instances[i].oCont == div) loaded = true;
 				if (!loaded) {
 					/* ---- push new imageFlow instance ---- */
 					instances.push(
 						new ImageFlow(div, size, zoom, border)
 					);
 					/* ---- init script (once) ---- */
 					if (!imf.initialized) {
 						imf.initialized = true;
 						/* ---- window resize event ---- */
 						addEvent(window, 'resize', function () {
 							var i = instances.length;
 							while (i--) instances[i].resize();
 						});
 						/* ---- stop drag N drop ---- */
 						addEvent(document.getElementById(div), 'mouseout', function (e) {
 							if (!e) e = window.event;
 							var tg = e.relatedTarget || e.toElement;
 							if (tg && tg.tagName == 'HTML') {
 								var i = instances.length;
 								while (i--) instances[i].oc.onmousemove = null;
 							}
 							return false;
 						});
 						/* ---- set interval loop ---- */
 						setInterval(function () {
 							var i = instances.length;
 							while (i--) instances[i].run();
 						}, 16);
 					}
 				}
 			}
 			/* ---- window onload event ---- */
 			addEvent(window, 'load', function () { load(); });
 		}
 	}
 }();
 
 /* ==== create imageFlow ==== */
 // div ID , size, zoom, border
 imf.create("imageFlow", 0.15, 1.5, 10);
 
 </script>
 </head>
 
 <body>
 	<div id="imageFlow">
 		<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>
 </body>
 </html>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>2</title>
 <meta http-equiv="imagetoolbar" content="no">
 <style type="text/css">
 	html {
 		overflow: hidden;
 	}
 	body {
 		background: #222;
 		width: 100%;
 		height: 100%;
 		cursor: crosshair;
 	}
 	.spanSlide {
 		position: absolute;
 		background: #000;
 		font-size: 1px;
 		overflow: hidden;
 	}
 	.imgSlide {
 		position: absolute;
 		left: 5%;
 		top: 5%;
 		width: 90%;
 		height: 90%;
 		overflow: hidden;
 	}
 	.txtSlide {
 		position: absolute;
 		top: 5%;
 		left: 50px;
 		width:100%;
 		color:#FFF;
 		font-family: arial, helvetica, verdana, sans-serif;
 		font-weight: bold;
 		font-size:96px;
 		letter-spacing:12px;
 		filter: alpha(opacity=70);
 		-moz-opacity:0.7;
 		opacity:0.7;
 	}
 </style>
 
 <script type="text/javascript">
 
 var ym=0;
 var ny=0;
 
 createElement = function(container, type, param){
 	o=document.createElement(type);
 	for(var i in param)o[i]=param[i];
 	container.appendChild(o);
 	return o;
 }
 
 mooz = {
 	O:[],
 	/////////
 	mult:6,
 	nbI:5,
 	/////////
 	rwh:0,
 	imgsrc:0,
 	W:0,
 	H:0,
 
 	Xoom:function(N){
 		this.o = createElement(document.getElementById("screen"), "span", {
 			'className':'spanSlide'
 		});
 		img = createElement(this.o, "img", {
 			'className':"imgSlide",
 			'src':mooz.imgsrc[N%mooz.imgsrc.length].src
 		});
 		spa = createElement(this.o, "span", {
 			'className':"imgSlide"
 		});
 		txt = createElement(spa, "span", {
 			'className':"txtSlide",
 			'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
 		});
 		this.N = 10000+N;
 	},
 
 	mainloop:function(){
 		with(this){
 			for(i=0; i<mooz.nbI; i++) {
 				O[i].N += (ym-ny)/8000;
 				N = O[i].N%nbI;
 				ti = Math.pow(mult,N);
 				with(O[i].o.style){
 					left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
 					top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
 					zIndex = Math.round(10000-ti*.1);
 					width = Math.round(ti*rwh)+"px";
 					height = Math.round(ti)+"px";
 				}
 			}
 		}
 		setTimeout("mooz.mainloop();", 16);
 	},
 
 	oigres:function(){
 		with(this){
 			W = parseInt(document.getElementById("screen").style.width);
 			H = parseInt(document.getElementById("screen").style.height);
 			imgsrc = document.getElementById("images").getElementsByTagName("img");
 			rwh = imgsrc[0].width/imgsrc[0].height;
 			for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
 			mainloop();
 		}
 	}
 }
 
 document.onmousemove = function(e){
 	if(window.event) e=window.event;
 	ym = (e.y || e.clientY);
 	if(ym/2>ny)ny=ym/2;
 }
 
 window.onload = function(){
 	ym = ny+50;
 	mooz.oigres();
 }
 
 </script>
 </head>
 
 <body>
 
 <div style="position:absolute;left:50%;top:50%">
 	<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>
 
 </body>
 </html>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>3</title>
 <style type="text/css">
 	html {
 		overflow: hidden;
 	}
 
 	body {
 		margin: 0px;
 		padding: 0px;
 		background: #000;
 		position: absolute;
 		width: 100%;
 		height: 100%;
 		cursor: crosshair;
 	}
 
 	#diapoContainer {
 		position: absolute;
 		left: 10%;
 		top: 10%;
 		width: 80%;
 		height: 80%;
 		background: #222;
 		overflow: hidden;
 	}
 
 	.imgDC {
 		position: absolute;
 		cursor: pointer;
 		border: #000 solid 2px;
 		filter: alpha(opacity=90);
 		opacity: 0.9;
 		visibility: hidden;
 	}
 
 	.spaDC {
 		position: absolute;
 		filter: alpha(opacity=20);
 		opacity: 0.2;
 		background: #000;
 		visibility: hidden;
 	}
 
 	.imgsrc {
 		position: absolute;
 		width: 120px;
 		height: 67px;
 		visibility: hidden;
 		margin: 4%;
 	}
 
 	#bkgcaption {
 		position: absolute;
 		bottom: 0px;
 		left: 0px;
 		width: 100%;
 		height: 6%;
 		background:#1a1a1a;
 	}
 	#caption {
 		position: absolute;
 		font-family: arial, helvetica, verdana, sans-serif;
 		white-space: nowrap;
 		color: #fff;
 		bottom: 0px;
 		width: 100%;
 		left: -10000px;
 		text-align: center;
 	}
 
 </style>
 
 <script type="text/javascript">
 var xm;
 var ym;
 
 /* ==== onmousemove event ==== */
 document.onmousemove = function(e){
 	if(window.event) e=window.event;
 	xm = (e.x || e.clientX);
 	ym = (e.y || e.clientY);
 }
 
 /* ==== window resize ==== */
 function resize() {
 	if(diapo)diapo.resize();
 }
 onresize = resize;
 
 /* ==== opacity ==== */
 setOpacity = function(o, alpha){
 	if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
 }
 
 
 ////////////////////////////////////////////////////////////////////////////////////////////
 /* ===== encapsulate script ==== */
 diapo = {
 	O : [],
 	DC : 0,
 	img : 0,
 	txt : 0,
 	N : 0,
 	xm : 0,
 	ym : 0,
 	nx : 0,
 	ny : 0,
 	nw : 0,
 	nh : 0,
 	rs : 0,
 	rsB : 0,
 	zo : 0,
 	tx_pos : 0,
 	tx_var : 0,
 	tx_target : 0,
 
 	/////// script parameters ////////
 	attraction : 2,
 	acceleration : .9,
 	dampening : .1,
 	zoomOver : 2,
 	zoomClick : 6,
 	transparency : .8,
 	font_size: 18,
 	//////////////////////////////////
 
 	/* ==== diapo resize ==== */
 	resize : function(){
 		with(this){
 			nx = DC.offsetLeft;
 			ny = DC.offsetTop;
 			nw = DC.offsetWidth;
 			nh = DC.offsetHeight;
 			txt.style.fontSize = Math.round(nh / font_size) + "px";
 			if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
 			rsB = rs;
 		}
 	},
 
 	/* ==== create diapo ==== */
 	CDiapo : function(o){
 		/* ==== init variables ==== */
 		this.o = o;
 		this.x_pos = this.y_pos = 0;
 		this.x_origin = this.y_origin = 0;
 		this.x_var = this.y_var = 0;
 		this.x_target = this.y_target = 0;
 		this.w_pos = this.h_pos = 0;
 		this.w_origin = this.h_origin = 0;
 		this.w_var = this.h_var = 0;
 		this.w_target = this.h_target = 0;
 		this.over = false;
 		this.click = false;
 
 		/* ==== create shadow ==== */
 		this.spa = document.createElement("span");
 		this.spa.className = "spaDC";
 		diapo.DC.appendChild(this.spa);
 
 		/* ==== create thumbnail image ==== */
 		this.img = document.createElement("img");
 		this.img.className = "imgDC";
 		this.img.src = o.src;
 		this.img.O = this;
 		diapo.DC.appendChild(this.img);
 		setOpacity(this.img, diapo.transparency);
 
 		/* ==== mouse events ==== */
 		this.img.onselectstart = new Function("return false;");
 		this.img.ondrag = new Function("return false;");
 		this.img.onmouseover = function(){
 			diapo.tx_target=0;
 			diapo.txt.innerHTML=this.O.o.alt;
 			this.O.over=true;
 			setOpacity(this,this.O.click?diapo.transparency:1);
 		}
 		this.img.onmouseout = function(){
 			diapo.tx_target=-diapo.nw;
 			this.O.over=false;
 			setOpacity(this,diapo.transparency);
 		}
 		this.img.onclick = function() {
 			if(!this.O.click){
 				if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
 				this.O.click = true;
 				this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
 				this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
 				diapo.zo = this;
 				setOpacity(this,diapo.transparency);
 			} else {
 				this.O.click = false;
 				this.O.over = false;
 				this.O.resize();
 				diapo.zo = 0;
 			}
 		}
 
 		/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
 		this.resize = function (){
 			with (this) {
 				x_origin = o.offsetLeft;
 				y_origin = o.offsetTop;
 				w_origin = o.offsetWidth;
 				h_origin = o.offsetHeight;
 			}
 		}
 
 		/* ==== animation function ==== */
 		this.position = function (){
 			with (this) {
 				/* ==== set target position ==== */
 				w_target = w_origin;
 				h_target = h_origin;
 				if(over){
 					/* ==== mouse over ==== */
 					w_target = w_origin * diapo.zoomOver;
 					h_target = h_origin * diapo.zoomOver;
 					x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
 					y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
 				} else {
 					/* ==== mouse out ==== */
 					x_target = x_origin;
 					y_target = y_origin;
 				}
 				if(click){
 					/* ==== clicked ==== */
 					w_target = w_origin * diapo.zoomClick;
 					h_target = h_origin * diapo.zoomClick;
 				}
 
 				/* ==== magic spring equations ==== */
 				x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
 				y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
 				w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
 				h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
 				diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
 
 				/* ==== html animation ==== */
 				with(img.style){
 					left = Math.round(x_pos) + "px";
 					top = Math.round(y_pos) + "px";
 					width = Math.round(Math.max(0, w_pos)) + "px";
 					height = Math.round(Math.max(0, h_pos)) + "px";
 					zIndex = Math.round(w_pos);
 				}
 				with(spa.style){
 					left = Math.round(x_pos + w_pos * .1) + "px";
 					top = Math.round(y_pos + h_pos * .1) + "px";
 					width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
 					height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
 					zIndex = Math.round(w_pos);
 				}
 			}
 		}
 	},
 
 	/* ==== main loop ==== */
 	run : function(){
 		diapo.xm = xm - diapo.nx;
 		diapo.ym = ym - diapo.ny;
 		/* ==== caption anim ==== */
 		diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
 		diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
 		/* ==== images anim ==== */
 		for(var i in diapo.O) diapo.O[i].position();
 		/* ==== loop ==== */
 		setTimeout("diapo.run();", 16);
 	},
 
 	/* ==== load images ==== */
 	images_load : function(){
 		// ===== loop until all images are loaded =====
 		var M = 0;
 		for(var i=0; i<diapo.N; i++) {
 			if(diapo.img[i].complete) {
 				diapo.img[i].style.position = "relative";
 				diapo.O[i].img.style.visibility = "visible";
 				diapo.O[i].spa.style.visibility = "visible";
 				M++;
 			}
 			resize();
 		}
 		if(M<diapo.N) setTimeout("diapo.images_load();", 128);
 	},
 
 	/* ==== init script ==== */
 	init : function() {
 		diapo.DC = document.getElementById("diapoContainer");
 		diapo.img = diapo.DC.getElementsByTagName("img");
 		diapo.txt = document.getElementById("caption");
 		diapo.N = diapo.img.length;
 		for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
 		diapo.resize();
 		diapo.tx_pos = -diapo.nw;
 		diapo.tx_target = -diapo.nw;
 		diapo.images_load();
 		diapo.run();
 	}
 }
 
 </script>
 </head>
 
 <body>
 
 <div id="diapoContainer">
 
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation">
 	<img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents">
 
 	<div id="bkgcaption"></div>
 	<div id="caption"></div>
 
 </div>
 
 <script type="text/javascript">
 /* ==== start script ==== */
 function dom_onload() {
 	if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
 }
 dom_onload();
 </script>
 
 </body>
 </html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>4</title>
 <meta http-equiv="imagetoolbar" content="no">
 <style type="text/css">
 	body {
 		background: #222;
 		overflow: hidden;
 		left: 0;
 		top: 0;
 		width: 100%;
 		height: 100%;
 		margin: 0;
 		padding: 0;
 	}
 
 	#screen img {
 		position: absolute;
 		visibility: hidden;
 	}
 
 	#screen span {
 		position: absolute;
 		background: #fff;
 		cursor: pointer;
 		visibility: hidden;
 		filter: alpha(opacity=80);
 		-moz-opacity: 0.8;
 		opacity: 0.8;
 	}
 </style>
 
 <script type="text/javascript">
 </script>
 </head>
 
 <body>
 
 	<div style="position:absolute;left:50%;top:50%">
 		<div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div>
 		<div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden">
 
 		</div>
 	</div>
 
 	<div id="images" style="position:absolute;left:-10000px;top:-10000px;">
 		<img onload="setTimeout('starter();',500)" src="http://preview.zcool.com.cn/code/js/04/4/wi37.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg">
 		<img src="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg">
 	</div>
 
 </body>
 </html>

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

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

标签

#function #animation #hyperlink #html #image