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

导读：
　　
　　

令人震撼的图片展示效果

<!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/" rel="nofollow">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/" rel="nofollow">...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/" rel="nofollow">...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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">...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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">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/" rel="nofollow">...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 οnlοad="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

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

Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...

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

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

最新文章

热门文章