令人震撼的图片展示效果 - Javascript经典专区 - JS组件 - JS控件

当前位置：首页 > 界面组件 > 文章内容

令人震撼的图片展示效果

来源：51js 发布时间：2008-04-10 阅读次数：

[摘要]:

效果一：
<!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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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/" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt=""> </div> </div> </body> </html>

效果二:
<!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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="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>5</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; width: 100%; height: 100%; cursor: crosshair; } #box { position: absolute; background: #111; border: gray solid 1px; visibility: hidden; } #screen { position: absolute; left: 0px; width: 100%; top: 10%; height: 80%; background: #000; border: gray solid 1px; } #box img { position: absolute; border: gray solid 1px; cursor: pointer; } #box span { position: absolute; color: #ccc; font-family: verdana; font-size: 12px; width: 200px; } #box a { text-decoration: none; color:#ff8000; } #box a:hover { text-decoration: none; background:#ff8000; color:#ffffff; } #box a:visited { text-decoration: none; color:#ff8000; } #box a:visited:hover { text-decoration: none; background:#ff8000; color:#ffffff; } #lnk { visibility: hidden; } </style> <script type="text/javascript"> document.onselectstart = new Function("return false"); O = new Array(); box = 0; img = 0; txt = 0; tit = 0; W = 0; H = 0; nI = 0; sel = 0; si = 0; ZOOM = 0; rImg = 0; ////////////////// speed = .06; // animation speed delay = .5; // 1 = no delay ////////////////// function dText(){ txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right"; txt.innerHTML = O[sel].tx; tit.innerHTML = O[sel].ti; } function CObj(n, s, x, tx, ti){ this.n = n; this.dim = s; this.tx = tx; this.ti = ti; this.is = img[n]; this.vz = 0; this.sx = 0; this.x0 = x; this.x1 = 0; this.zo = 0; this.over = function() { with(this){ if(n!=sel){ O[sel].dim = 100; O[n].dim = ZOOM * 100; sel = n; l = 0; for(k=0; k<nI; k++){ O[k].x0 = l; l += O[k].dim; } txt.innerHTML = tit.innerHTML = ""; setTimeout("dText()", 32); } } } this.anim = function () { with(this){ vz = speed*(vz+(x1-sx)*delay); x1 -= vz; sx = (n==0)?0:O[n-1].x0+O[n-1].dim; zo -= (zo-dim)*speed; l = (x1*si)+6*(n+1); w = zo*si; is.style.left = Math.round(l)+'px'; is.style.top = Math.round((H-w*rImg)*.5)+'px'; is.style.width = Math.round(w)+'px'; is.style.height = Math.round(w*rImg)+'px'; if(sel == n){ if(sel<nI*.5) { tit.style.left = txt.style.left = Math.round(l+w+6)+'px'; } else { tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px'; } txt.style.top = Math.round(-(w*rImg)*.25)+'px'; tit.style.top = Math.round((w*rImg)*.33)+'px'; } } } } function run(){ for(j in O)O[j].anim(); setTimeout("run()", 16); } function doResize(){ tit.style.width = Math.round(nx*.25)+'px'; txt.style.width = Math.round(nx*.25)+'px'; tit.style.fontSize = (nx/30)+'px'; txt.style.fontSize = (nx/70)+'px'; with(box.style){ width = Math.round(W)+'px'; height = Math.round(H)+'px'; left = Math.round(nx/2-W/2)+'px'; top = Math.round(ny/2-H/2)+'px'; } } function resize(){ nx = scr.offsetWidth; ny = scr.offsetHeight; W = nx*90/100; si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100)); H = (100*si*rImg)+14; doResize(); } onresize = resize; onload = function(){ scr = document.getElementById("screen"); box = document.getElementById("box"); tit = document.getElementById("tit"); txt = document.getElementById("txt"); img = box.getElementsByTagName("img"); Lnk = document.getElementById("lnk").getElementsByTagName("a"); nI = img.length; ZOOM = nI; rImg = img[0].height/img[0].width; resize(); s = ZOOM * 100; x = 0; tit.innerHTML = img[0].title; txt.innerHTML = img[0].alt; for(i=0; i<nI; i++) { var t = img[i].alt; if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>'; O[i] = new CObj(i, s, x, t, img[i].title); img[i].alt = ""; img[i].title = ""; img[i].onmousedown = new Function("return false;"); img[i].onmouseover = new Function('O['+i+'].over();'); if(Lnk[i].href!=""){ /* ==== hyperlink ==== */ img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");'); } x += s; s = 100; } box.style.visibility = "visible"; run(); } </script> </head> <body> <div id="screen"> <div id="box""> <img src="http://preview.zcool.com.cn/code/js/04/5/newborn.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/newborn.jpg" title="explain" alt="They explained a little about what they were doing."> <img src="http://preview.zcool.com.cn/code/js/04/5/majesty.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/majesty.jpg" title="strain" alt="I hoped I wouldn′t crack under the strain."> <img src="http://preview.zcool.com.cn/code/js/04/5/whitemagic.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/whitemagic.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position."> <img src="http://preview.zcool.com.cn/code/js/04/5/gazebo2k3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane."> <img src="http://preview.zcool.com.cn/code/js/04/5/pyre.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/pyre.jpg" title="inhumane" alt="But they couldn′t hide the very worst of their inhumane undertakings from the people."> <img src="http://preview.zcool.com.cn/code/js/04/5/singularity.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice."> <img src="http://preview.zcool.com.cn/code/js/04/5/spellcraft.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/5/spellcraft.jpg" title="never again" alt="Never more. Never again."> <span id="txt"></span> <span id="tit"></span> <span id="lnk"> <a href="http://www.dhteumeuleu.com" _fcksavedurl="http://www.dhteumeuleu.com">www.dhteumeuleu.com</a> <a></a> <a></a> <a></a> <a></a> <a></a> <a></a> </span> </div> </div>  <span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span> <span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span> <script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</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:200px;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" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi37.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg"> </div> </body> </html>

效果六:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>6</title> <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"> 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://preview.zcool.com.cn/code/js/04/6/images/wi23.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wi23.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt06.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt06.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt47.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt47.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt16.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt43.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt43.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt19.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt19.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt27.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt27.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt46.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt46.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt14.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt21.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt21.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt35.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt35.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt48.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt48.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt55.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt55.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt40.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt40.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt53.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt53.jpg"> <img alt="" src="http://preview.zcool.com.cn/code/js/04/6/images/wt25.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/6/images/wt25.jpg"> </div> <script type="text/javascript"> /* ==== start script ==== */ onresize = tv.resize; tv.init(); </script> </body> </html>

效果七:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>7</title> <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%; } #center { position: absolute; left: 50%; top: ಲ%; } #slider { position: absolute; width: 820px; height: 333px; left: -430px; top: -186px; overflow: hidden; background: #000; border: 20px solid #000; } #slider .slide { position: absolute; top: 0px; height: 333px; width: 500px; background: #000; overflow: hidden; border-left: #000 solid 1px; cursor: default; } #slider .title { color: #F80; font-weight: bold; font-size: 1.2em; margin-right: 1.5em; text-decoration: none; } #slider .backgroundText { position: absolute; width: 100%; height: 100%; top: 100%; background: #000; filter: alpha(opacity=40); opacity: 0.4; } #slider .text { position: absolute; top: 1%; top: 100%; color: #FFF; font-family: verdana, arial, Helvetica, sans-serif; font-size: 0.9em; text-align: justify; width: 470px; left: 10px; } #slider .diapo { position: absolute; filter: alpha(opacity=100); opacity: 1; visibility: hidden; } </style> <script type="text/javascript"> /* ==== slider nameSpace ==== */ var slider = function() { /* ==== private methods ==== */ 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 setOpacity (obj,o) { if (obj.filters) obj.filters.alpha.opacity = Math.round(o); else obj.style.opacity = o / 100; } /* ==== Slider Constructor ==== */ function Slider(oCont, speed, iW, iH, oP) { this.slides = []; this.over = false; this.S = this.S0 = speed; this.iW = iW; this.iH = iH; this.oP = oP; this.oc = document.getElementById(oCont); this.frm = getElementsByClass(this.oc, 'div', 'slide'); this.NF = this.frm.length; this.resize(); for (var i = 0; i < this.NF; i++) { this.slides[i] = new Slide(this, i); } this.oc.parent = this; this.view = this.slides[0]; this.Z = this.mx; /* ==== on mouse out event ==== */ this.oc.onmouseout = function () { this.parent.mouseout(); return false; } } Slider.prototype = { /* ==== animation loop ==== */ run : function () { this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5; this.view.calc(); var i = this.NF; while (i--) this.slides[i].move(); }, /* ==== resize ==== */ resize : function () { this.wh = this.oc.clientWidth; this.ht = this.oc.clientHeight; this.wr = this.wh * this.iW; this.r = this.ht / this.wr; this.mx = this.wh / this.NF; this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1); }, /* ==== rest ==== */ mouseout : function () { this.over = false; setOpacity(this.view.img, this.oP); } } /* ==== Slide Constructor ==== */ Slide = function (parent, N) { this.parent = parent; this.N = N; this.x0 = this.x1 = N * parent.mx; this.v = 0; this.loaded = false; this.cpt = 0; this.start = new Date(); this.obj = parent.frm[N]; this.txt = getElementsByClass(this.obj, 'div', 'text'); this.img = getElementsByClass(this.obj, 'img', 'diapo'); this.bkg = document.createElement('div'); this.bkg.className = 'backgroundText'; this.obj.insertBefore(this.bkg, this.txt); if (N == 0) this.obj.style.borderLeft = 'none'; this.obj.style.left = Math.floor(this.x0) + 'px'; setOpacity(this.img, parent.oP); /* ==== mouse events ==== */ this.obj.parent = this; this.obj.onmouseover = function() { this.parent.over(); return false; } } Slide.prototype = { /* ==== target positions ==== */ calc : function() { var that = this.parent; // left slides for (var i = 0; i <= this.N; i++) { that.slides[i].x1 = i * that.Z; } // right slides for (var i = this.N + 1; i < that.NF; i++) { that.slides[i].x1 = that.wh - (that.NF - i) * that.Z; } }, /* ==== HTML animation : move slides ==== */ move : function() { var that = this.parent; var s = (this.x1 - this.x0) / that.S; /* ==== lateral slide ==== */ if (this.N && Math.abs(s) > .5) { this.obj.style.left = Math.floor(this.x0 += s) + 'px'; } /* ==== vertical text ==== */ var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0; if (Math.abs(v - this.v) > .5) { this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px'; this.v = v; this.cpt++; } else { if (!this.pro) { /* ==== adjust speed ==== */ this.pro = true; var tps = new Date() - this.start; if(this.cpt > 1) { that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0); } } } if (!this.loaded) { if (this.img.complete) { this.img.style.visibility = 'visible'; this.loaded = true; } } }, /* ==== light ==== */ over : function () { this.parent.resize(); this.parent.over = true; setOpacity(this.parent.view.img, this.parent.oP); this.parent.view = this; this.start = new Date(); this.cpt = 0; this.pro = false; this.calc(); setOpacity(this.img, 100); } } /* ==== public method - script initialization ==== */ return { init : function() { // create instances of sliders here // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70); setInterval("slider.s1.run();", 16); } } }(); </script> </head> <body> <div id="center"> <div id="slider"> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf10.jpg" alt=""> <div class="text"> <span class="title">The best</span> The offspring of a customized orbiter, O飇ostem arose as the best balanced home for our plans. So we submitted to its conditions. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf14.jpg" alt=""> <div class="text"> <span class="title">Prototype</span> O飇ostem's deep impulse flow is selectively regulated by a molecule originated in the prototype model, that creates its own variational principles, as oriented by the first local generation of terminable androids. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf24.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf24.jpg" alt=""> <div class="text"> <span class="title">Has been reduced</span> Paired hosts come out nicely after only two cycles now. Their size has been reduced to a half the original as planned, and indeed they show an evolutionary advantage in the process of fixing self-generated instructions. Plus, they are beautiful. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf04.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf04.jpg" alt=""> <div class="text"> <span class="title">By close-alikes</span> Now I have regained hopes in someday finding myself surrounded by close-alikes to us. However, they will not be audible, at least not in my life span. We resolved the low freq vibration a superior solution for our communicational goals ... </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf01.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf01.jpg" alt=""> <div class="text"> <span class="title">To bear</span> We did not expect their surface to produce such a carbon powder coat, though this is the best model so far. I shall have to bear with the inconveniences. They seem to establish a parallel communication through that carbon coat and I find myself unable to decodify the signal into anything meaningful. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf15.jpg" alt=""> <div class="text"> <span class="title">The zero level</span> Today a set of vibration came up from the zero level; we expect to launch the transitional program in no longer than five basetime units. Psykesoma? galore and we'll betray our very nature into infinite, unending 2D surfaces. We do need that vibration, and we will conquer its source. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf41.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf41.jpg" alt=""> <div class="text"> <span class="title">Beautifully</span> To keep my sanity I wear the tactile sensors all the time. They translate beautifully; I can even see distances while still on Psykesoma. This was quite a discovery. We have grown more adaptable than expected. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf26.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf26.jpg" alt=""> <div class="text"> <span class="title">Uneasy to match</span> Yewoona had to travel farther and longer than I did. Her base orbiter was set to keep a complex combinational path that made it uneasy to match our circuits. But her nature showed stronger than programmed. </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf50.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf50.jpg" alt=""> <div class="text"> <span class="title">Adapted to serve</span> Keep feeding them. We will never be this lucky again; an autogenerated species adapted to serve all our needs! </div> </div> <div class="slide"> <img class="diapo" src="http://preview.zcool.com.cn/code/js/04/7/sf19.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/7/sf19.jpg" alt=""> <div class="text"> <a class="title" href="http://www.dhteumeuleu.com" _fcksavedurl="http://www.dhteumeuleu.com">At soonest</a> "Blood is dark red, iron dark blue, this tale is blissful and so are you". I should get to the hotel at soonest. The agency guy must be there already, with some luck we'll have some nice dinner on him. How's that? </div> </div> </div> </div> <script type="text/javascript"> /* ==== start script ==== */ slider.init(); </script> </body> </html>

效果八:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>8</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #222; position: absolute; width: 100%; height: 100%; } #screen { position:absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: #000; overflow: hidden; cursor: url("../cross_rm.cur"), auto; } #pan { position: absolute; height: 150%; width: 150%; padding: 5%; background: #000000 url("bumps2.gif"); } #screen .frame { position: relative; float: left; width: 29%; height: 27%; margin: 2%; background: #000; overflow: hidden; } #screen .slider { position: absolute; width: 100%; height: 100%; background: #222 url("bumps3.gif"); z-index: 1000; } #pan img { position: absolute; visibility: hidden; } #pan .legend { position: absolute; bottom: 0px; font-size: 1em; color: #FFF; width: 2000px; font-family: arial; font-weight: bold; } </style> <script type="text/javascript"> var xm = 0; var ym = 0; sP = { cx : 0, cy : 0, N : 0, R : [], I : [], C : [], L : [], Id : 0, init : function () { /* ==== init script ==== */ this.scr = document.getElementById('screen'); this.pan = document.getElementById('pan'); this.div = this.pan.getElementsByTagName('div'); this.scr.onselectstart = function () { return false; } this.scr.ondrag = function () { return false; } /* ==== for each pane ==== */ for (var i = 0, o; o = this.div[i]; i++) { if (o.className == 'frame') { /* ==== create legend ==== */ o.l = document.createElement('div'); o.l.className = 'legend'; o.appendChild(o.l); /* ==== create flap ==== */ o.r = document.createElement('div'); o.r.className = 'slider'; o.appendChild(o.r); o.r.x = 0; o.r.l = o.l; o.r.p = 0; o.r.s = 2; o.r.m = false; o.img = o.r.img = o.getElementsByTagName('img')[0]; o.r.c = Math.random() * 100; o.r.o = o; sP.R[sP.N] = o.r; sP.I[sP.N] = o.img.src; sP.L[sP.N] = o.title; o.title = ""; sP.N++; /* ==== flap mouse over event ==== */ o.r.onmouseover = function () { if (!this.m && this.img.complete) { /* ==== switch image ==== */ if (sP.O != this && !this.n) { this.x = this.o.offsetWidth; this.l.innerHTML = sP.L[sP.Id]; this.img.src = sP.I[sP.Id]; this.resize(); this.n = true; if(++sP.Id >= sP.N) { sP.Id = 0; for (var i = 0, o; o = sP.R[i]; i++) o.n = false; } } /* ==== up++ ==== */ if (sP.O) { sP.O.s = 2; sP.C.push(sP.O); } this.m = true; sP.O = this; sP.Or = this; } } /* ==== resize image ==== */ o.r.resize = function () { var i = new Image(); i.src = this.img.src; this.img.style.width = (i.width < this.offsetWidth) ? Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px'; this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px'; this.w = (this.img.offsetWidth - this.offsetWidth) * .5; this.h = (this.img.offsetHeight - this.offsetHeight) * .5; this.img.style.visibility = 'visible'; } } } /* ==== start script ==== */ sP.resize(); sP.run(); }, resize : function () { /* ==== window resize ==== */ var o = sP.scr; sP.nw = o.offsetWidth; sP.nh = o.offsetHeight; sP.iw = sP.pan.offsetWidth; sP.ih = sP.pan.offsetHeight; for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent) { sP.nx += o.offsetLeft; sP.ny += o.offsetTop; } for (var i = 0, o; o = sP.R[i]; i++) o.resize(); }, /* ==== main loop ==== */ run : function () { /* ==== scroll main frame ==== */ sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1; sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1; sP.pan.style.left = Math.round(sP.cx) + 'px'; sP.pan.style.top = Math.round(sP.cy) + 'px'; /* ==== lissajou ==== */ if(sP.O) { sP.O.c += .015; sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px'; sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px'; sP.O.l.style.left = Math.round(sP.O.x--) + 'px'; } /* ==== up ==== */ if (sP.Or) { sP.Or.p -= sP.Or.s; sP.Or.s *= 1.1; if (sP.Or.p < -sP.Or.offsetHeight) { sP.Or.p = -sP.Or.offsetHeight; sP.Or.s = 2; sP.Or.m = false; sP.Or = false; } sP.O.style.top = Math.round(sP.O.p) + 'px'; } /* ==== down ==== */ for (var i = 0, c; c = sP.C[i]; i++) { if (c != sP.Or) { c.p += c.s; c.s *= 1.2; if (c.p >= 0) { c.p = 0; c.s = 2; c.m = false; sP.C.splice(i, 1); } c.style.top = Math.round(c.p) + 'px'; } else { c.s = 2; c.m = false; sP.C.splice(i, 1); } } setTimeout(sP.run, 16); } } /* ==== global mouse position ==== */ document.onmousemove = function(e) { if (window.event) e = window.event; xm = e.clientX; ym = e.clientY; return false; } </script> </head> <body> <div id="screen"> <div id="pan"> <div class="frame" title="Isolating the longer dimension of the main hall"><img src="http://preview.zcool.com.cn/code/js/04/8/gr69.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/gr69.jpg" alt=""></div> <div class="frame" title="?We’ll start from here?, my partner said."><img src="http://preview.zcool.com.cn/code/js/04/8/or66.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/or66.jpg" alt=""></div> <div class="frame" title="As we proceeded, I recalled a similar situation"><img src="http://preview.zcool.com.cn/code/js/04/8/bl117.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/bl117.jpg" alt=""></div> <div class="frame" title="The place was no example of resource efficient construction."><img src="http://preview.zcool.com.cn/code/js/04/8/bl112.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/bl112.jpg" alt=""></div> <div class="frame" title="Ultracompaction had been caused by the linear vibrator."><img src="http://preview.zcool.com.cn/code/js/04/8/gr68.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/gr68.jpg" alt=""></div> <div class="frame" title="We put the meter to use. It was the fully-built one."><img src="http://preview.zcool.com.cn/code/js/04/8/rd103.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/rd103.jpg" alt=""></div> <div class="frame" title="Soon we accessed the restricted area."><img src="http://preview.zcool.com.cn/code/js/04/8/rd101.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/rd101.jpg" alt=""></div> <div class="frame" title="The combo password was validated."><img src="http://preview.zcool.com.cn/code/js/04/8/gr66.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/gr66.jpg" alt=""></div> <div class="frame" title="We succeeded to quantify the network."><img src="http://preview.zcool.com.cn/code/js/04/8/bl116.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/8/bl116.jpg" alt=""></div> </div> </div> <script type="text/javascript"> /* ==== start script ==== */ sP.init(); onresize = sP.resize; </script> </body> </html>

效果九:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>9</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #screen { position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; background: #000; color: #fff; } #screen div { position: absolute; overflow: hidden; cursor: pointer; } #screen img { position: absolute; width: 100%; height: 100%; } #screen .label { position: absolute; color: #FFF; background: #000; font-family: arial; white-space: no-wrap; } </style>  <script type="text/javascript" src="http://preview.zcool.com.cn/code/js/04/9/dhteumeuleu.js"></script> <script type="text/javascript"> // ======================================================== // ====== Javascript Slideshow ====== // script written by Gerard Ferrandez - December 31, 2006 // [url]http://www.dhteumeuleu.com/[/url] // ======================================================== var diap = { ///////////////////////////////// BR : 3, // border size in px ZR : .75, // zoom ratio SP : .1, // speed ///////////////////////////////// V : false, S : false, G : true, resize : function () { /* ==== window resize event ==== */ diap.nw = diap.scr.offsetWidth; diap.nh = diap.scr.offsetHeight; diap.nwu = (diap.nw * diap.ZR); diap.nhu = (diap.nh * diap.ZR); diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR; diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR; diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt); if (diap.N) { diap.setPosition(); if (!diap.G) diap.delLabels(); } }, setPosition : function () { /* ==== calculate image target position ==== */ var k = 0; var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0; for (var j = 0; j < this.NY; j++) { var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0; for (var i = 0; i < this.NX; i++) { var o = this.spa[k++]; o.y1 = y; o.x1 = x; o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR; o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR; x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX); } y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY); } }, delLabels : function () { /* ==== remove texts ==== */ for ( var i = 0; i < diap.N; i++) { var o = diap.spa[i]; if (o.T) diap.scr.removeChild(o.T); o.T = false; } }, run : function () { /* ==== main loop ==== */ for ( var i = 0; i < diap.N; i++) diap.spa[i].move(); setTimeout(diap.run, 16); }, init : function (container, NX, NY, path, images) { /* ==== initialize script ==== */ this.scr = id(container); if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; } this.NX = NX; this.NY = NY; this.spa = {}; this.resize(); var k = 0; for (var y = 0; y < this.NY; y++) { for (var x = 0; x < this.NX; x++) { /* ==== create HTML elements ==== */ var s = this.spa[k] = document.createElement('div'); s.img = document.createElement('img'); /* ==== opacity optimized function ==== */ s.img.setOpacity = function (alpha) { if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100; if (alpha == 100) { /* ==== speed opt - remove IE filter ==== */ this.style.visibility = 'visible'; this.style.filter = ''; this.style.opacity = 1; return 100; } else if (alpha == 0) { /* ==== hide image, remove opacity ==== */ this.style.visibility = 'hidden'; this.style.filter = ''; this.style.opacity = 0; return 0; } if (this.filters) { /* ==== IE filter ==== */ if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')'; else this.filters.alpha.opacity = alpha; /* ==== CSS opacity ==== */ } else this.style.opacity = alpha * .01; return alpha; } s.img.src = id('loading').src; s.appendChild(s.img); this.scr.appendChild(s); /* ==== pre-load image ==== */ s.pre = new Image(); s.pre.obj = s; s.pre.onload = function() { this.obj.img.src = this.src; } s.pre.src = path + images[k][0]; /* ==== set image variables ==== */ s.x = x; s.y = y; s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2; s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;; s.x1 = x * (this.nw / this.NX); s.y1 = y * (this.nh / this.NY); s.w0 = 0; s.h0 = 0; s.w1 = 0; s.h1 = 0; s.V = 0; s.t = images[k][1]; s.T = false; /* ==== function move image ==== */ s.move = function() { /* ==== position images ==== */ this.style.left = px(this.x0 += (this.x1 - this.x0) * diap.SP); this.style.top = px(this.y0 += (this.y1 - this.y0) * diap.SP); this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP); this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP); if (this != diap.S) { /* ==== set image background color ==== */ if (Math.abs(this.w1 - this.w0) > 1) { var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt)); this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')'); } if (this == diap.V) { /* ==== on mouseover: fade in ==== */ if (this.V < 100) this.img.setOpacity(this.V += 5); } else { /* ==== fade out ==== */ if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2); } } /* ==== text effect ==== */ if (this.T) this.dispLabel(); } /* ==== display text function (typewriter FX) ==== */ s.dispLabel = function() { if (diap.G || diap.S == this) { /* ==== zoomed image ==== */ this.T.style.left = px(this.x0); this.T.style.top = px(this.y0); this.T.style.width = px(this.w0); } else { /* ==== calculate text position ==== */ var xt = diap.S.x0 + this.w0 + diap.BR; if (this.y == diap.Y) { this.T.style.top = px(this.y0 - this.f - diap.BR); if (this.y == 0) var xt = diap.S.x0; } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0)); if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5); else this.T.style.left = px(xt); if (this != diap.V) { /* ==== text type out ==== */ this.Tp--; this.T.innerHTML = this.t.substring(0, this.Tp); if (this.Tp < 1) { diap.scr.removeChild(this.T); this.T = false; } } else { if (this.Tp < this.t.length) { /* ==== text type in ==== */ this.Tp++; this.T.innerHTML = this.t.substring(0, this.Tp); } } } } /* ==== create text function ==== */ s.createLabel = function () { this.T = document.createElement('div'); this.T.className = 'label'; if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right'; this.f = 4 + Math.round(Math.sqrt(diap.nht * 2)); if(this == diap.S) { this.f *= 2; this.T.style.background = 'none'; this.T.style.textAlign = 'center'; } this.T.style.fontSize = ''.concat(this.f, 'px'); this.T.innerHTML = this.t; this.T.style.left = px(-1000); this.T.style.width = px(diap.nwu * .5); this.T.style.height = px(this.f + 3); this.Tp = 0; diap.scr.appendChild(this.T); } /* ==== on mouse over event ==== */ s.onmouseover = function() { if (diap.S != this && diap.G != this) { /* ==== display image ==== */ this.img.setOpacity(100); this.V = this.img.setOpacity(20); } /* ==== create text ==== */ if (!this.T) this.createLabel(); diap.V = this; } /* ==== on click event ==== */ s.onclick = function() { /* ==== memorize selected image ==== */ diap.X = this.x; diap.Y = this.y; diap.V = false; diap.G = false; this.V = this.img.setOpacity(100); diap.delLabels(); if (diap.S == this) { /* ==== zoom out - grid mode on ==== */ diap.S = false; diap.G = this; for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel(); } else { /* ==== zoom in ==== */ diap.S = this; this.createLabel(); } diap.setPosition(); } s.createLabel(); s.ondblclick = s.onclick; s.ondrag = function () { return false; } k++; } } this.N = NX * NY; /* ==== add resize event ==== */ this.resize(); addEvent(window, 'resize', diap.resize); /* ==== start main loop ==== */ this.run(); } } /* ==== create diaporama ==== */ onload = function () { /* ==== container, X, T, path, [image.src, text] ==== */ diap.init("screen", 4, 4, "", [ ["http://preview.zcool.com.cn/code/js/04/9/or8.jpg", "His little voodoo was a success"], ["http://preview.zcool.com.cn/code/js/04/9/or46.jpg", "She arrived from nowhere"], ["http://preview.zcool.com.cn/code/js/04/9/or10.jpg", "as cute as she could be"], ["http://preview.zcool.com.cn/code/js/04/9/or4.jpg", "It was a night of full moon"], ["http://preview.zcool.com.cn/code/js/04/9/or16.jpg", "It didn't take him anytime to fall in love"], ["http://preview.zcool.com.cn/code/js/04/9/or9.jpg", "He had been certain of his success"], ["http://preview.zcool.com.cn/code/js/04/9/or6.jpg", "In a few days after"], ["http://preview.zcool.com.cn/code/js/04/9/or27.jpg", "All the tools were in place"], ["http://preview.zcool.com.cn/code/js/04/9/or14.jpg", "The girl left a note..."], ["http://preview.zcool.com.cn/code/js/04/9/or30.jpg", "...saying she had left home"], ["http://preview.zcool.com.cn/code/js/04/9/or1.jpg", "揝o what抯 with the panic??"], ["http://preview.zcool.com.cn/code/js/04/9/or2.jpg", "Tears for fears"], ["http://preview.zcool.com.cn/code/js/04/9/or12.jpg", "A light in the dark"], ["http://preview.zcool.com.cn/code/js/04/9/or44.jpg", "Flashes of pain and hope"], ["http://preview.zcool.com.cn/code/js/04/9/or39.jpg", "If only we could capture..."], ["http://preview.zcool.com.cn/code/js/04/9/or33.jpg", "...the beauty of autumn"] ]); } </script> </head> <body> <div id="screen"></div> <img id="loading" alt="" src="http://preview.zcool.com.cn/code/js/04/9/or11.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/9/or11.jpg" style="visibility: hidden"> </body> </html>

效果十:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>10</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 span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; left:-32px; top:-32px; cursor: pointer; } #caption, #title{ color: #FFF; font-family: georgia, 'times new roman', times, veronica, serif; font-size: 1em; text-align: center; } #caption b { font-size: 2em; } </style> <script type="text/javascript"> </script></head><body> <div style="position: absolute; left: 50%; top: 50%;"> <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div> <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div> <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" alt=""></span> <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" alt=""></span> <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" alt=""></span> <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" alt=""></span> <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" alt=""></span> <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" alt=""></span> <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" alt=""></span> <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im18.jpg" alt=""></span> <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im8.jpg" alt=""></span> <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im10.jpg" alt=""></span> <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im12.jpg" alt=""></span> <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im17.jpg" alt=""></span> <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im14.jpg" alt=""></span> <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im15.jpg" alt=""></span> <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im16.jpg" alt=""></span> <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im9.jpg" alt=""></span> </div> <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div> </div> <script type="text/javascript"> </script> </body></html>

/uploads/soft/jsclass.rar

由编辑

» 进入JAVASCRIPT经典社区讨论 [收藏] [推荐] [返回顶部] [打印本页] [关闭窗口]

来顶一下

上一篇：没有了
下一篇：日历控件[完整版]

网友评论 - (共有 5 位网友发表了评论)

发表评论