[推荐]令人震撼的图片展示效果
生活随笔
收集整理的這篇文章主要介紹了
[推荐]令人震撼的图片展示效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
導讀：
令人震撼的圖片展示效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>1</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> width: 100%;<br> height: 100%;<br> }<br> #imageFlow {<br> position: absolute;<br> width: 100%;<br> height: 80%;<br> left: 0%;<br> top: 10%;<br> background: #000;<br> }<br> #imageFlow .diapo {<br> position: absolute;<br> left: -1000px;<br> cursor: pointer;<br> -ms-interpolation-mode: nearest-neighbor;<br> }<br> #imageFlow .link {<br> border: dotted #fff 1px;<br> margin-left: -1px;<br> margin-bottom: -1px;<br> }<br> #imageFlow .bank {<br> visibility: hidden;<br> }<br> #imageFlow .top {<br> position: absolute;<br> width: 100%;<br> height: 40%;<br> background: #181818;<br> }<br> #imageFlow .text {<br> position: absolute;<br> left: 0px;<br> width: 100%;<br> bottom: 16%;<br> text-align: center;<br> color: #FFF;<br> font-family: verdana, arial, Helvetica, sans-serif;<br> z-index: 1000;<br> }<br> #imageFlow .title {<br> font-size: 0.9em;<br> font-weight: bold;<br> }<br> #imageFlow .legend {<br> font-size: 0.8em;<br> }<br> #imageFlow .scrollbar {<br> position: absolute;<br> left: 10%;<br> bottom: 10%;<br> width: 80%;<br> height: 16px;<br> z-index: 1000;<br> }<br> #imageFlow .track {<br> position: absolute;<br> left: 1%;<br> width: 98%;<br> height: 16px;<br> filter: alpha(opacity=30);<br> opacity: 0.3;<br> }<br> #imageFlow .arrow-left {<br> position: absolute;<br> }<br> #imageFlow .arrow-right {<br> position: absolute;<br> right: 0px;<br> }<br> #imageFlow .bar {<br> position: absolute;<br> height: 16px;<br> left: 25px;<br> }<br></style><br><br><script type="text/javascript"><br><br>var imf = function () {<br> var lf = 0;<br> var instances = [];<br> function getElementsByClass (object, tag, className) {<br> var o = object.getElementsByTagName(tag);<br> for ( var i = 0, n = o.length, ret = []; i < n; i++)<br> if (o[i].className == className) ret.push(o[i]);<br> if (ret.length == 1) ret = ret[0];<br> return ret;<br> }<br> function addEvent (o, e, f) {<br> if (window.addEventListener) o.addEventListener(e, f, false);<br> else if (window.attachEvent) r = o.attachEvent('on' + e, f);<br> }<br> function createReflexion (cont, img) {<br> var flx = false;<br> if (document.createElement("canvas").getContext) {<br> flx = document.createElement("canvas");<br> flx.width = img.width;<br> flx.height = img.height;<br> var context = flx.getContext("2d");<br> context.translate(0, img.height);<br> context.scale(1, -1);<br> context.drawImage(img, 0, 0, img.width, img.height);<br> context.globalCompositeOperation = "destination-out";<br> var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);<br> gradient.addColorStop(1, "rgba(255, 255, 255, 0)");<br> gradient.addColorStop(0, "rgba(255, 255, 255, 1)");<br> context.fillStyle = gradient;<br> context.fillRect(0, 0, img.width, img.height * 2);<br> } else {<br> /* ---- DXImageTransform ---- */<br> flx = document.createElement('img');<br> flx.src = img.src;<br> flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +<br> 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +<br> (img.height * .25) + ')';<br> }<br> /* ---- insert Reflexion ---- */<br> flx.style.position = 'absolute';<br> flx.style.left = '-1000px';<br> cont.appendChild(flx);<br> return flx;<br> }<br> /* ==== ImageFlow Constructor ==== */<br> function ImageFlow(oCont, size, zoom, border) {<br> this.diapos = [];<br> this.scr = false;<br> this.size = size;<br> this.zoom = zoom;<br> this.bdw = border;<br> this.oCont = oCont;<br> this.oc = document.getElementById(oCont);<br> this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');<br> this.text = getElementsByClass(this.oc, 'div', 'text');<br> this.title = getElementsByClass(this.text, 'div', 'title');<br> this.legend = getElementsByClass(this.text, 'div', 'legend');<br> this.bar = getElementsByClass(this.oc, 'img', 'bar');<br> this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');<br> this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');<br> this.bw = this.bar.width;<br> this.alw = this.arL.width - 5;<br> this.arw = this.arR.width - 5;<br> this.bar.parent = this.oc.parent = this;<br> this.arL.parent = this.arR.parent = this;<br> this.view = this.back = -1;<br> this.resize();<br> this.oc.onselectstart = function () { return false; }<br> /* ---- create images ---- */<br> var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');<br> this.NF = img.length;<br> for (var i = 0, o; o = img[i]; i++) {<br> this.diapos[i] = new Diapo(this, i,<br> o.rel,<br> o.title || '- ' + i + ' -',<br> o.innerHTML || o.rel,<br> o.href || ',<br> o.target || '_self'<br> );<br> }<br> /* ==== add mouse wheel events ==== */<br> if (window.addEventListener)<br> this.oc.addEventListener('DOMMouseScroll', function(e) {<br> this.parent.scroll(-e.detail);<br> }, false);<br> else this.oc.onmousewheel = function () {<br> this.parent.scroll(event.wheelDelta);<br> }<br> /* ==== scrollbar drag N drop ==== */<br> this.bar.onmousedown = function (e) {<br> if (!e) e = window.event;<br> var scl = e.screenX - this.offsetLeft;<br> var self = this.parent;<br> /* ---- move bar ---- */<br> this.parent.oc.onmousemove = function (e) {<br> if (!e) e = window.event;<br> self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';<br> self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);<br> if (self.view != self.back) self.calc();<br> return false;<br> }<br> /* ---- release scrollbar ---- */<br> this.parent.oc.onmouseup = function (e) {<br> self.oc.onmousemove = null;<br> return false;<br> }<br> return false;<br> }<br> /* ==== right arrow ==== */<br> this.arR.onclick = this.arR.ondblclick = function () {<br> if (this.parent.view < this.parent.NF - 1)<br> this.parent.calc(1);<br> }<br> /* ==== Left arrow ==== */<br> this.arL.onclick = this.arL.ondblclick = function () {<br> if (this.parent.view > 0)<br> this.parent.calc(-1);<br> }<br> }<br> /* ==== ImageFlow prototype ==== */<br> ImageFlow.prototype = {<br> /* ==== targets ==== */<br> calc : function (inc) {<br> if (inc) this.view += inc;<br> var tw = 0;<br> var lw = 0;<br> var o = this.diapos[this.view];<br> if (o && o.loaded) {<br> /* ---- reset ---- */<br> var ob = this.diapos[this.back];<br> if (ob && ob != o) {<br> ob.img.className = 'diapo';<br> ob.z1 = 1;<br> }<br> /* ---- update legend ---- */<br> this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);<br> this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);<br> /* ---- update hyperlink ---- */<br> if (o.url) {<br> o.img.className = 'diapo link';<br> window.status = 'hyperlink: ' + o.url;<br> } else {<br> o.img.className = 'diapo';<br> window.status = ';<br> }<br> /* ---- calculate target sizes & positions ---- */<br> o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;<br> var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);<br> var x = x0 + o.w1 + this.bdw;<br> for (var i = this.view + 1, o; o = this.diapos[i]; i++) {<br> if (o.loaded) {<br> o.x1 = x;<br> o.w1 = (this.ht / o.r) * this.size;<br> x += o.w1 + this.bdw;<br> tw += o.w1 + this.bdw;<br> }<br> }<br> x = x0 - this.bdw;<br> for (var i = this.view - 1, o; o = this.diapos[i]; i--) {<br> if (o.loaded) {<br> o.w1 = (this.ht / o.r) * this.size;<br> o.x1 = x - o.w1;<br> x -= o.w1 + this.bdw;<br> tw += o.w1 + this.bdw;<br> lw += o.w1 + this.bdw;<br> }<br> }<br> /* ---- move scrollbar ---- */<br> if (!this.scr && tw) {<br> var r = (this.ws - this.alw - this.arw - this.bw) / tw;<br> this.bar.style.left = Math.round(this.alw + lw * r) + 'px';<br> }<br> /* ---- save preview view ---- */<br> this.back = this.view;<br> }<br> },<br> /* ==== mousewheel scrolling ==== */<br> scroll : function (sc) {<br> if (sc < 0) {<br> if (this.view < this.NF - 1) this.calc(1);<br> } else {<br> if (this.view > 0) this.calc(-1);<br> }<br> },<br> /* ==== resize ==== */<br> resize : function () {<br> this.wh = this.oc.clientWidth;<br> this.ht = this.oc.clientHeight;<br> this.ws = this.scrollbar.offsetWidth;<br> this.calc();<br> this.run(true);<br> },<br> /* ==== move all images ==== */<br> run : function (res) {<br> var i = this.NF;<br> while (i--) this.diapos[i].move(res);<br> }<br> }<br> /* ==== Diapo Constructor ==== */<br> Diapo = function (parent, N, src, title, text, url, target) {<br> this.parent = parent;<br> this.loaded = false;<br> this.title = title;<br> this.text = text;<br> this.url = url;<br> this.target = target;<br> this.N = N;<br> this.img = document.createElement('img');<br> this.img.src = src;<br> this.img.parent = this;<br> this.img.className = 'diapo';<br> this.x0 = this.parent.oc.clientWidth;<br> this.x1 = this.x0;<br> this.w0 = 0;<br> this.w1 = 0;<br> this.z1 = 1;<br> this.img.parent = this;<br> this.img.onclick = function() { this.parent.click(); }<br> this.parent.oc.appendChild(this.img);<br> /* ---- display external link ---- */<br> if (url) {<br> this.img.onmouseover = function () { this.className = 'diapo link'; }<br> this.img.onmouseout = function () { this.className = 'diapo'; }<br> }<br> }<br> /* ==== Diapo prototype ==== */<br> Diapo.prototype = {<br> /* ==== HTML rendering ==== */<br> move : function (res) {<br> if (this.loaded) {<br> var sx = this.x1 - this.x0;<br> var sw = this.w1 - this.w0;<br> if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {<br> /* ---- paint only when moving ---- */<br> this.x0 += sx * .1;<br> this.w0 += sw * .1;<br> if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {<br> /* ---- paint only visible images ---- */<br> this.visible = true;<br> var o = this.img.style;<br> var h = this.w0 * this.r;<br> /* ---- diapo ---- */<br> o.left = Math.round(this.x0) + 'px';<br> o.bottom = Math.floor(this.parent.ht * .25) + 'px';<br> o.width = Math.round(this.w0) + 'px';<br> o.height = Math.round(h) + 'px';<br> /* ---- reflexion ---- */<br> if (this.flx) {<br> var o = this.flx.style;<br> o.left = Math.round(this.x0) + 'px';<br> o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';<br> o.width = Math.round(this.w0) + 'px';<br> o.height = Math.round(h) + 'px';<br> }<br> } else {<br> /* ---- disable invisible images ---- */<br> if (this.visible) {<br> this.visible = false;<br> this.img.style.width = '0px';<br> if (this.flx) this.flx.style.width = '0px';<br> }<br> }<br> }<br> } else {<br> /* ==== image onload ==== */<br> if (this.img.complete && this.img.width) {<br> /* ---- get size image ---- */<br> this.iw = this.img.width;<br> this.ih = this.img.height;<br> this.r = this.ih / this.iw;<br> this.loaded = true;<br> /* ---- create reflexion ---- */<br> this.flx = createReflexion(this.parent.oc, this.img);<br> if (this.parent.view < 0) this.parent.view = this.N;<br> this.parent.calc();<br> }<br> }<br> },<br> /* ==== diapo onclick ==== */<br> click : function () {<br> if (this.parent.view == this.N) {<br> /* ---- click on zoomed diapo ---- */<br> if (this.url) {<br> /* ---- open hyperlink ---- */<br> window.open(this.url, this.target);<br> } else {<br> /* ---- zoom in/out ---- */<br> this.z1 = this.z1 == 1 ? this.parent.zoom : 1;<br> this.parent.calc();<br> }<br> } else {<br> /* ---- select diapo ---- */<br> this.parent.view = this.N;<br> this.parent.calc();<br> }<br> return false;<br> }<br> }<br> /* ==== public methods ==== */<br> return {<br> /* ==== initialize script ==== */<br> create : function (div, size, zoom, border) {<br> /* ---- instanciate imageFlow ---- */<br> var load = function () {<br> var loaded = false;<br> var i = instances.length;<br> while (i--) if (instances[i].oCont == div) loaded = true;<br> if (!loaded) {<br> /* ---- push new imageFlow instance ---- */<br> instances.push(<br> new ImageFlow(div, size, zoom, border)<br> );<br> /* ---- init script (once) ---- */<br> if (!imf.initialized) {<br> imf.initialized = true;<br> /* ---- window resize event ---- */<br> addEvent(window, 'resize', function () {<br> var i = instances.length;<br> while (i--) instances[i].resize();<br> });<br> /* ---- stop drag N drop ---- */<br> addEvent(document.getElementById(div), 'mouseout', function (e) {<br> if (!e) e = window.event;<br> var tg = e.relatedTarget || e.toElement;<br> if (tg && tg.tagName == 'HTML') {<br> var i = instances.length;<br> while (i--) instances[i].oc.onmousemove = null;<br> }<br> return false;<br> });<br> /* ---- set interval loop ---- */<br> setInterval(function () {<br> var i = instances.length;<br> while (i--) instances[i].run();<br> }, 16);<br> }<br> }<br> }<br> /* ---- window onload event ---- */<br> addEvent(window, 'load', function () { load(); });<br> }<br> }<br>}();<br><br>/* ==== create imageFlow ==== */<br>// div ID , size, zoom, border<br>imf.create("imageFlow", 0.15, 1.5, 10);<br><br></script><br></head><br><br><body><br> <div id="imageFlow"><br> <div class="top"></div><br> <div class="bank"><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> </div><br><br> <div class="text"><br> <div class="title">Loading</div><br> <div class="legend">Please wait...</div><br> </div><br> <div class="scrollbar"><br> <img class="track" src="http://preview.zcool.com.cn/code/js/04/1/sb.gif" alt=""><br> <img class="arrow-left" src="http://preview.zcool.com.cn/code/js/04/1/sl.gif" alt=""><br> <img class="arrow-right" src="http://preview.zcool.com.cn/code/js/04/1/sr.gif" alt=""><br> <img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt=""><br> </div><br> </div><br></body><br></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"><br><html><br><head><br><title>2</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br> body {<br> background: #222;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br> .spanSlide {<br> position: absolute;<br> background: #000;<br> font-size: 1px;<br> overflow: hidden;<br> }<br> .imgSlide {<br> position: absolute;<br> left: 5%;<br> top: 5%;<br> width: 90%;<br> height: 90%;<br> overflow: hidden;<br> }<br> .txtSlide {<br> position: absolute;<br> top: 5%;<br> left: 50px;<br> width:100%;<br> color:#FFF;<br> font-family: arial, helvetica, verdana, sans-serif;<br> font-weight: bold;<br> font-size:96px;<br> letter-spacing:12px;<br> filter: alpha(opacity=70);<br> -moz-opacity:0.7;<br> opacity:0.7;<br> }<br></style><br><br><script type="text/javascript"><br><br>var ym=0;<br>var ny=0;<br><br>createElement = function(container, type, param){<br> o=document.createElement(type);<br> for(var i in param)o[i]=param[i];<br> container.appendChild(o);<br> return o;<br>}<br><br>mooz = {<br> O:[],<br> /<br> mult:6,<br> nbI:5,<br> /<br> rwh:0,<br> imgsrc:0,<br> W:0,<br> H:0,<br><br> Xoom:function(N){<br> this.o = createElement(document.getElementById("screen"), "span", {<br> 'className':'spanSlide'<br> });<br> img = createElement(this.o, "img", {<br> 'className':"imgSlide",<br> 'src':mooz.imgsrc[N%mooz.imgsrc.length].src<br> });<br> spa = createElement(this.o, "span", {<br> 'className':"imgSlide"<br> });<br> txt = createElement(spa, "span", {<br> 'className':"txtSlide",<br> 'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title<br> });<br> this.N = 10000+N;<br> },<br><br> mainloop:function(){<br> with(this){<br> for(i=0; i<mooz.nbI; i++) {<br> O[i].N += (ym-ny)/8000;<br> N = O[i].N%nbI;<br> ti = Math.pow(mult,N);<br> with(O[i].o.style){<br> left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";<br> top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";<br> zIndex = Math.round(10000-ti*.1);<br> width = Math.round(ti*rwh)+"px";<br> height = Math.round(ti)+"px";<br> }<br> }<br> }<br> setTimeout("mooz.mainloop();", 16);<br> },<br><br> oigres:function(){<br> with(this){<br> W = parseInt(document.getElementById("screen").style.width);<br> H = parseInt(document.getElementById("screen").style.height);<br> imgsrc = document.getElementById("images").getElementsByTagName("img");<br> rwh = imgsrc[0].width/imgsrc[0].height;<br> for(var i=0;i<nbI;i++) O[i] = new Xoom(i);<br> mainloop();<br> }<br> }<br>}<br><br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> ym = (e.y || e.clientY);<br> if(ym/2>ny)ny=ym/2;<br>}<br><br>window.onload = function(){<br> ym = ny+50;<br> mooz.oigres();<br>}<br><br></script><br></head><br><br><body><br><br><div style="position:absolute;left:50%;top:50%"><br> <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div><br> <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div><br> <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div><br></div><br><br><div id="images" style="visibility:hidden"><br> <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg"><br> <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg"><br> <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg"><br> <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg"><br> <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg"><br></div><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>3</title><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br><br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> position: absolute;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br><br> #diapoContainer {<br> position: absolute;<br> left: 10%;<br> top: 10%;<br> width: 80%;<br> height: 80%;<br> background: #222;<br> overflow: hidden;<br> }<br><br> .imgDC {<br> position: absolute;<br> cursor: pointer;<br> border: #000 solid 2px;<br> filter: alpha(opacity=90);<br> opacity: 0.9;<br> visibility: hidden;<br> }<br><br> .spaDC {<br> position: absolute;<br> filter: alpha(opacity=20);<br> opacity: 0.2;<br> background: #000;<br> visibility: hidden;<br> }<br><br> .imgsrc {<br> position: absolute;<br> width: 120px;<br> height: 67px;<br> visibility: hidden;<br> margin: 4%;<br> }<br><br> #bkgcaption {<br> position: absolute;<br> bottom: 0px;<br> left: 0px;<br> width: 100%;<br> height: 6%;<br> background:#1a1a1a;<br> }<br> #caption {<br> position: absolute;<br> font-family: arial, helvetica, verdana, sans-serif;<br> white-space: nowrap;<br> color: #fff;<br> bottom: 0px;<br> width: 100%;<br> left: -10000px;<br> text-align: center;<br> }<br><br></style><br><br><script type="text/javascript"><br>var xm;<br>var ym;<br><br>/* ==== onmousemove event ==== */<br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> xm = (e.x || e.clientX);<br> ym = (e.y || e.clientY);<br>}<br><br>/* ==== window resize ==== */<br>function resize() {<br> if(diapo)diapo.resize();<br>}<br>onresize = resize;<br><br>/* ==== opacity ==== */<br>setOpacity = function(o, alpha){<br> if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;<br>}<br><br><br><br>/* ===== encapsulate script ==== */<br>diapo = {<br> O : [],<br> DC : 0,<br> img : 0,<br> txt : 0,<br> N : 0,<br> xm : 0,<br> ym : 0,<br> nx : 0,<br> ny : 0,<br> nw : 0,<br> nh : 0,<br> rs : 0,<br> rsB : 0,<br> zo : 0,<br> tx_pos : 0,<br> tx_var : 0,<br> tx_target : 0,<br><br> /// script parameters <br> attraction : 2,<br> acceleration : .9,<br> dampening : .1,<br> zoomOver : 2,<br> zoomClick : 6,<br> transparency : .8,<br> font_size: 18,<br> //<br><br> /* ==== diapo resize ==== */<br> resize : function(){<br> with(this){<br> nx = DC.offsetLeft;<br> ny = DC.offsetTop;<br> nw = DC.offsetWidth;<br> nh = DC.offsetHeight;<br> txt.style.fontSize = Math.round(nh / font_size) + "px";<br> if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();<br> rsB = rs;<br> }<br> },<br><br> /* ==== create diapo ==== */<br> CDiapo : function(o){<br> /* ==== init variables ==== */<br> this.o = o;<br> this.x_pos = this.y_pos = 0;<br> this.x_origin = this.y_origin = 0;<br> this.x_var = this.y_var = 0;<br> this.x_target = this.y_target = 0;<br> this.w_pos = this.h_pos = 0;<br> this.w_origin = this.h_origin = 0;<br> this.w_var = this.h_var = 0;<br> this.w_target = this.h_target = 0;<br> this.over = false;<br> this.click = false;<br><br> /* ==== create shadow ==== */<br> this.spa = document.createElement("span");<br> this.spa.className = "spaDC";<br> diapo.DC.appendChild(this.spa);<br><br> /* ==== create thumbnail image ==== */<br> this.img = document.createElement("img");<br> this.img.className = "imgDC";<br> this.img.src = o.src;<br> this.img.O = this;<br> diapo.DC.appendChild(this.img);<br> setOpacity(this.img, diapo.transparency);<br><br> /* ==== mouse events ==== */<br> this.img.onselectstart = new Function("return false;");<br> this.img.ondrag = new Function("return false;");<br> this.img.onmouseover = function(){<br> diapo.tx_target=0;<br> diapo.txt.innerHTML=this.O.o.alt;<br> this.O.over=true;<br> setOpacity(this,this.O.click?diapo.transparency:1);<br> }<br> this.img.onmouseout = function(){<br> diapo.tx_target=-diapo.nw;<br> this.O.over=false;<br> setOpacity(this,diapo.transparency);<br> }<br> this.img.onclick = function() {<br> if(!this.O.click){<br> if(diapo.zo && diapo.zo != this) diapo.zo.onclick();<br> this.O.click = true;<br> this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;<br> this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;<br> diapo.zo = this;<br> setOpacity(this,diapo.transparency);<br> } else {<br> this.O.click = false;<br> this.O.over = false;<br> this.O.resize();<br> diapo.zo = 0;<br> }<br> }<br><br> /* ==== rearrange thumbnails based on "imgsrc" images position ==== */<br> this.resize = function (){<br> with (this) {<br> x_origin = o.offsetLeft;<br> y_origin = o.offsetTop;<br> w_origin = o.offsetWidth;<br> h_origin = o.offsetHeight;<br> }<br> }<br><br> /* ==== animation function ==== */<br> this.position = function (){<br> with (this) {<br> /* ==== set target position ==== */<br> w_target = w_origin;<br> h_target = h_origin;<br> if(over){<br> /* ==== mouse over ==== */<br> w_target = w_origin * diapo.zoomOver;<br> h_target = h_origin * diapo.zoomOver;<br> x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));<br> y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));<br> } else {<br> /* ==== mouse out ==== */<br> x_target = x_origin;<br> y_target = y_origin;<br> }<br> if(click){<br> /* ==== clicked ==== */<br> w_target = w_origin * diapo.zoomClick;<br> h_target = h_origin * diapo.zoomClick;<br> }<br><br> /* ==== magic spring equations ==== */<br> x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;<br> y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;<br> w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);<br> h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);<br> diapo.rs += (Math.abs(x_var) + Math.abs(y_var));<br><br> /* ==== html animation ==== */<br> with(img.style){<br> left = Math.round(x_pos) + "px";<br> top = Math.round(y_pos) + "px";<br> width = Math.round(Math.max(0, w_pos)) + "px";<br> height = Math.round(Math.max(0, h_pos)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> with(spa.style){<br> left = Math.round(x_pos + w_pos * .1) + "px";<br> top = Math.round(y_pos + h_pos * .1) + "px";<br> width = Math.round(Math.max(0, w_pos * 1.1)) + "px";<br> height = Math.round(Math.max(0, h_pos * 1.1)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> }<br> }<br> },<br><br> /* ==== main loop ==== */<br> run : function(){<br> diapo.xm = xm - diapo.nx;<br> diapo.ym = ym - diapo.ny;<br> /* ==== caption anim ==== */<br> diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;<br> diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";<br> /* ==== images anim ==== */<br> for(var i in diapo.O) diapo.O[i].position();<br> /* ==== loop ==== */<br> setTimeout("diapo.run();", 16);<br> },<br><br> /* ==== load images ==== */<br> images_load : function(){<br> // ===== loop until all images are loaded =====<br> var M = 0;<br> for(var i=0; i<diapo.N; i++) {<br> if(diapo.img[i].complete) {<br> diapo.img[i].style.position = "relative";<br> diapo.O[i].img.style.visibility = "visible";<br> diapo.O[i].spa.style.visibility = "visible";<br> M++;<br> }<br> resize();<br> }<br> if(M<diapo.N) setTimeout("diapo.images_load();", 128);<br> },<br><br> /* ==== init script ==== */<br> init : function() {<br> diapo.DC = document.getElementById("diapoContainer");<br> diapo.img = diapo.DC.getElementsByTagName("img");<br> diapo.txt = document.getElementById("caption");<br> diapo.N = diapo.img.length;<br> for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));<br> diapo.resize();<br> diapo.tx_pos = -diapo.nw;<br> diapo.tx_target = -diapo.nw;<br> diapo.images_load();<br> diapo.run();<br> }<br>}<br><br></script><br></head><br><br><body><br><br><div id="diapoContainer"><br><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"><br><br> <div id="bkgcaption"></div><br> <div id="caption"></div><br><br></div><br><br><script type="text/javascript"><br>/* ==== start script ==== */<br>function dom_onload() {<br> if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);<br>}<br>dom_onload();<br></script><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>3</title><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br><br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> position: absolute;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br><br> #diapoContainer {<br> position: absolute;<br> left: 10%;<br> top: 10%;<br> width: 80%;<br> height: 80%;<br> background: #222;<br> overflow: hidden;<br> }<br><br> .imgDC {<br> position: absolute;<br> cursor: pointer;<br> border: #000 solid 2px;<br> filter: alpha(opacity=90);<br> opacity: 0.9;<br> visibility: hidden;<br> }<br><br> .spaDC {<br> position: absolute;<br> filter: alpha(opacity=20);<br> opacity: 0.2;<br> background: #000;<br> visibility: hidden;<br> }<br><br> .imgsrc {<br> position: absolute;<br> width: 120px;<br> height: 67px;<br> visibility: hidden;<br> margin: 4%;<br> }<br><br> #bkgcaption {<br> position: absolute;<br> bottom: 0px;<br> left: 0px;<br> width: 100%;<br> height: 6%;<br> background:#1a1a1a;<br> }<br> #caption {<br> position: absolute;<br> font-family: arial, helvetica, verdana, sans-serif;<br> white-space: nowrap;<br> color: #fff;<br> bottom: 0px;<br> width: 100%;<br> left: -10000px;<br> text-align: center;<br> }<br><br></style><br><br><script type="text/javascript"><br>var xm;<br>var ym;<br><br>/* ==== onmousemove event ==== */<br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> xm = (e.x || e.clientX);<br> ym = (e.y || e.clientY);<br>}<br><br>/* ==== window resize ==== */<br>function resize() {<br> if(diapo)diapo.resize();<br>}<br>onresize = resize;<br><br>/* ==== opacity ==== */<br>setOpacity = function(o, alpha){<br> if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;<br>}<br><br><br><br>/* ===== encapsulate script ==== */<br>diapo = {<br> O : [],<br> DC : 0,<br> img : 0,<br> txt : 0,<br> N : 0,<br> xm : 0,<br> ym : 0,<br> nx : 0,<br> ny : 0,<br> nw : 0,<br> nh : 0,<br> rs : 0,<br> rsB : 0,<br> zo : 0,<br> tx_pos : 0,<br> tx_var : 0,<br> tx_target : 0,<br><br> /// script parameters <br> attraction : 2,<br> acceleration : .9,<br> dampening : .1,<br> zoomOver : 2,<br> zoomClick : 6,<br> transparency : .8,<br> font_size: 18,<br> //<br><br> /* ==== diapo resize ==== */<br> resize : function(){<br> with(this){<br> nx = DC.offsetLeft;<br> ny = DC.offsetTop;<br> nw = DC.offsetWidth;<br> nh = DC.offsetHeight;<br> txt.style.fontSize = Math.round(nh / font_size) + "px";<br> if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();<br> rsB = rs;<br> }<br> },<br><br> /* ==== create diapo ==== */<br> CDiapo : function(o){<br> /* ==== init variables ==== */<br> this.o = o;<br> this.x_pos = this.y_pos = 0;<br> this.x_origin = this.y_origin = 0;<br> this.x_var = this.y_var = 0;<br> this.x_target = this.y_target = 0;<br> this.w_pos = this.h_pos = 0;<br> this.w_origin = this.h_origin = 0;<br> this.w_var = this.h_var = 0;<br> this.w_target = this.h_target = 0;<br> this.over = false;<br> this.click = false;<br><br> /* ==== create shadow ==== */<br> this.spa = document.createElement("span");<br> this.spa.className = "spaDC";<br> diapo.DC.appendChild(this.spa);<br><br> /* ==== create thumbnail image ==== */<br> this.img = document.createElement("img");<br> this.img.className = "imgDC";<br> this.img.src = o.src;<br> this.img.O = this;<br> diapo.DC.appendChild(this.img);<br> setOpacity(this.img, diapo.transparency);<br><br> /* ==== mouse events ==== */<br> this.img.onselectstart = new Function("return false;");<br> this.img.ondrag = new Function("return false;");<br> this.img.onmouseover = function(){<br> diapo.tx_target=0;<br> diapo.txt.innerHTML=this.O.o.alt;<br> this.O.over=true;<br> setOpacity(this,this.O.click?diapo.transparency:1);<br> }<br> this.img.onmouseout = function(){<br> diapo.tx_target=-diapo.nw;<br> this.O.over=false;<br> setOpacity(this,diapo.transparency);<br> }<br> this.img.onclick = function() {<br> if(!this.O.click){<br> if(diapo.zo && diapo.zo != this) diapo.zo.onclick();<br> this.O.click = true;<br> this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;<br> this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;<br> diapo.zo = this;<br> setOpacity(this,diapo.transparency);<br> } else {<br> this.O.click = false;<br> this.O.over = false;<br> this.O.resize();<br> diapo.zo = 0;<br> }<br> }<br><br> /* ==== rearrange thumbnails based on "imgsrc" images position ==== */<br> this.resize = function (){<br> with (this) {<br> x_origin = o.offsetLeft;<br> y_origin = o.offsetTop;<br> w_origin = o.offsetWidth;<br> h_origin = o.offsetHeight;<br> }<br> }<br><br> /* ==== animation function ==== */<br> this.position = function (){<br> with (this) {<br> /* ==== set target position ==== */<br> w_target = w_origin;<br> h_target = h_origin;<br> if(over){<br> /* ==== mouse over ==== */<br> w_target = w_origin * diapo.zoomOver;<br> h_target = h_origin * diapo.zoomOver;<br> x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));<br> y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));<br> } else {<br> /* ==== mouse out ==== */<br> x_target = x_origin;<br> y_target = y_origin;<br> }<br> if(click){<br> /* ==== clicked ==== */<br> w_target = w_origin * diapo.zoomClick;<br> h_target = h_origin * diapo.zoomClick;<br> }<br><br> /* ==== magic spring equations ==== */<br> x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;<br> y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;<br> w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);<br> h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);<br> diapo.rs += (Math.abs(x_var) + Math.abs(y_var));<br><br> /* ==== html animation ==== */<br> with(img.style){<br> left = Math.round(x_pos) + "px";<br> top = Math.round(y_pos) + "px";<br> width = Math.round(Math.max(0, w_pos)) + "px";<br> height = Math.round(Math.max(0, h_pos)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> with(spa.style){<br> left = Math.round(x_pos + w_pos * .1) + "px";<br> top = Math.round(y_pos + h_pos * .1) + "px";<br> width = Math.round(Math.max(0, w_pos * 1.1)) + "px";<br> height = Math.round(Math.max(0, h_pos * 1.1)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> }<br> }<br> },<br><br> /* ==== main loop ==== */<br> run : function(){<br> diapo.xm = xm - diapo.nx;<br> diapo.ym = ym - diapo.ny;<br> /* ==== caption anim ==== */<br> diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;<br> diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";<br> /* ==== images anim ==== */<br> for(var i in diapo.O) diapo.O[i].position();<br> /* ==== loop ==== */<br> setTimeout("diapo.run();", 16);<br> },<br><br> /* ==== load images ==== */<br> images_load : function(){<br> // ===== loop until all images are loaded =====<br> var M = 0;<br> for(var i=0; i<diapo.N; i++) {<br> if(diapo.img[i].complete) {<br> diapo.img[i].style.position = "relative";<br> diapo.O[i].img.style.visibility = "visible";<br> diapo.O[i].spa.style.visibility = "visible";<br> M++;<br> }<br> resize();<br> }<br> if(M<diapo.N) setTimeout("diapo.images_load();", 128);<br> },<br><br> /* ==== init script ==== */<br> init : function() {<br> diapo.DC = document.getElementById("diapoContainer");<br> diapo.img = diapo.DC.getElementsByTagName("img");<br> diapo.txt = document.getElementById("caption");<br> diapo.N = diapo.img.length;<br> for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));<br> diapo.resize();<br> diapo.tx_pos = -diapo.nw;<br> diapo.tx_target = -diapo.nw;<br> diapo.images_load();<br> diapo.run();<br> }<br>}<br><br></script><br></head><br><br><body><br><br><div id="diapoContainer"><br><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"><br><br> <div id="bkgcaption"></div><br> <div id="caption"></div><br><br></div><br><br><script type="text/javascript"><br>/* ==== start script ==== */<br>function dom_onload() {<br> if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);<br>}<br>dom_onload();<br></script><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>4</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> body {<br> background: #222;<br> overflow: hidden;<br> left: 0;<br> top: 0;<br> width: 100%;<br> height: 100%;<br> margin: 0;<br> padding: 0;<br> }<br><br> #screen img {<br> position: absolute;<br> visibility: hidden;<br> }<br><br> #screen span {<br> position: absolute;<br> background: #fff;<br> cursor: pointer;<br> visibility: hidden;<br> filter: alpha(opacity=80);<br> -moz-opacity: 0.8;<br> opacity: 0.8;<br> }<br></style><br><br><script type="text/javascript"><!--<br>var Oz, Ov;<br>var obj = [];<br>var K = 0;<br>var img, scr, W, H;<br>var SP = 40; /* speed */<br>var dz = false;<br><br>/* html positioning */<br>position = function(obj, x, y, w, h)<br>{<br> with(obj.style){<br> left = Math.round(x) + "px";<br> top = Math.round(y) + "px";<br> width = Math.round(w) + "px";<br> height = Math.round(h) + "px";<br> }<br>}<br><br>/* create object instances */<br>function Cobj(parent, N, x, y, w, h)<br>{<br> this.zoomed = (parent ? 0 : 1);<br> obj[K] = this;<br> this.K = K ++;<br> this.parent = parent;<br> this.children = [];<br> this.x = x;<br> this.y = y;<br> this.w = w;<br> this.h = h;<br> this.vx = 0;<br> this.vy = 0;<br> this.vw = 0;<br> this.vh = 0;<br> this.xi = 0;<br> this.yi = 0;<br> this.wi = 0;<br> this.hi = 0;<br> this.x1 = 0;<br> this.y1 = 0;<br> this.w1 = 0;<br> this.h1 = 0;<br> this.x0 = 0;<br> this.y0 = 0;<br> this.w0 = 0;<br> this.h0 = 0;<br> this.imgsrc = img[N];<br><br> /* create HTML elements */<br> this.img = document.createElement("img");<br> this.img.src = this.imgsrc.src;<br> this.img.obj = this;<br> scr.appendChild(this.img);<br> this.spa = document.createElement("span");<br> this.spa.style.cursor = "pointer";<br> this.spa.obj = this;<br> scr.appendChild(this.spa);<br> if (parent) parent.children.push(this);<br><br> /* Flickr */<br> this.blink = function()<br> {<br> with(this)<br> {<br> position(spa, x0, y0, w0, h0);<br> spa.style.visibility = "visible";<br> img.style.cursor = "pointer";<br> setTimeout("obj[" + K + "].spa.style.visibility='hidden'", 128);<br> }<br> }<br><br> /* display image & children */<br> this.display = function(zoomed)<br> {<br> with(this)<br> {<br> position(img, x0, y0, w0, h0);<br> img.style.visibility = "visible";<br> if (parent && ! zoomed)<br> {<br> blink();<br> Ov = img;<br> }<br> }<br> }<br><br> /* init zoom */<br> this.init_zoom = function(d)<br> {<br> with(this)<br> {<br> w1 = imgsrc.width;<br> h1 = imgsrc.height;<br> x1 = (W - w1) / 2;<br> y1 = (H - h1) / 2;<br> x0 = (parent ? x + parent.x1 : (W - w1) / 2);<br> y0 = (parent ? y + parent.y1 : (H - h1) / 2);<br> w0 = (parent ? w : w1);<br> h0 = (parent ? h : h1);<br> xi = d > 0 ? x0 : x1;<br> yi = d > 0 ? y0 : y1;<br> wi = d > 0 ? w0 : w1;<br> hi = d > 0 ? h0 : h1;<br> vx = d * (x1 - x0) / SP;<br> vy = d * (y1 - y0) / SP;<br> vw = d * (w1 - w0) / SP;<br> vh = d * (h1 - h0) / SP;<br> parent.vx = d * ((x1 - (x * w1 / w0)) - parent.x1) / SP;<br> parent.vy = d * ((y1 - (y * h1 / h0)) - parent.y1) / SP;<br> parent.vw = vw * (parent ? (parent.w1 / w) : 0);<br> parent.vh = vh * (parent ? (parent.h1 / h) : 0);<br> }<br> }<br><br> /* animate zoom in - out */<br> this.zoom = function()<br> {<br> with(this)<br> {<br> xi += vx;<br> yi += vy;<br> wi += vw;<br> hi += vh;<br><br> parent.xi += parent.vx;<br> parent.yi += parent.vy;<br> parent.wi += parent.vw;<br> parent.hi += parent.vh;<br><br> position(img, xi, yi, wi, hi);<br> position(parent.img, parent.xi, parent.yi, parent.wi, parent.hi);<br><br> if ((zoomed == 0 && wi > w0 - vw) || (zoomed == 1 && wi < w1 - vw))<br> {<br> setTimeout("obj[" + K + "].zoom()", 16);<br> }<br> else<br> {<br> dz = false;<br> for (var i in Oz.children)<br> {<br> Oz.children[i].init_zoom();<br> Oz.children[i].display(false, false);<br> }<br> }<br> }<br> }<br><br> /* mouse events */<br> this.img.onmouseover = function()<br> {<br> if (this != Ov) with(this.obj) if (parent && ! zoomed && ! dz) blink();<br> Ov = this;<br> return false;<br> }<br><br> this.img.onclick = function()<br> {<br> with(this.obj)<br> {<br> if (parent && !dz && imgsrc.complete)<br> {<br> if (zoomed == 1)<br> {<br> /* zoom out */<br> Oz = this.obj.parent;<br> zoomed = 0;<br> init_zoom( -1);<br> for (var i in children) children[i].img.style.visibility = "hidden";<br> parent.zoomed = 1;<br> dz = true;<br> zoom();<br> }<br> else if (zoomed == 0)<br> {<br> /* zoom in */<br> Oz = this.obj;<br> img.style.cursor = "crosshair";<br> zoomed = 1;<br> init_zoom(1);<br> for (var i in parent.children)<br> {<br> if (this.obj != parent.children[i])<br> parent.children[i].img.style.visibility = "hidden";<br> }<br> parent.zoomed = -1;<br> dz = true;<br> zoom();<br> }<br> }<br> }<br> return false;<br> }<br><br> this.spa.onmousedown = function()<br> {<br> this.style.visibility="hidden";<br> this.obj.img.onclick();<br> return false;<br> }<br>}<br><br>/* initialization */<br>/* must start after the first image is loaded */<br>function starter()<br>{<br> scr = document.getElementById("screen");<br> img = document.getElementById("images").getElementsByTagName("img");<br> W = parseInt(scr.style.width);<br> H = parseInt(scr.style.height);<br><br> /* ==== tree-zoom ==== */<br> // new Cobj(parent, image, x, y, w, h)<br> O = new Cobj(0, 0, 0, 0, 0, 0);<br> O0 = new Cobj(O, 1, 127, 98, 181, 134);<br> O1 = new Cobj(O0, 2, 158, 150, 85, 155);<br> O11 = new Cobj(O1, 4, 136, 98, 80, 196);<br> O111 = new Cobj(O11, 5, 20, 154, 70, 57);<br> O1111 = new Cobj(O111, 6, 161, 137, 154, 76);<br> O112 = new Cobj(O11, 11, 155, 154, 70, 57);<br> O1121 = new Cobj(O112, 12, 273, 116, 49, 72);<br> O2 = new Cobj(O0, 3, 281, 150, 90, 154);<br> O21 = new Cobj(O2, 7, 35, 295, 133, 82);<br> O211 = new Cobj(O21, 15, 316, 183, 20, 36);<br> O22 = new Cobj(O2, 8, 179, 295, 127, 79);<br> O221 = new Cobj(O22, 13, 132, 84, 54, 102);<br> O2211 = new Cobj(O221, 14, 6, 234, 69, 50);<br> O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);<br> O23 = new Cobj(O2, 9, 92, 148, 138, 76);<br> O231 = new Cobj(O23, 10, 249, 106, 83, 65);<br> O2311 = new Cobj(O231, 0, 120, 87, 57, 59);<br><br> /* display */<br> O.init_zoom(1);<br> O.display(true);<br> for (var i in O.children)<br> {<br> O.children[i].init_zoom(1);<br> O.children[i].display(true);<br> }<br>}<br>//--><br></script><br></head><br><br><body><br><br> <div style="position:absolute;left:50%;top:50%"><br> <div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div><br> <div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden"><br><br> </div><br> </div><br><br> <div id="images" style="position:absolute;left:-10000px;top:-10000px;"><br> <img οnlοad="setTimeout('starter();',500)" src="http://preview.zcool.com.cn/code/js/04/4/wi37.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg"><br> </div><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
本文轉自
http://bbs.51js.com/thread-77249-1-1.html
令人震撼的圖片展示效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>1</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> width: 100%;<br> height: 100%;<br> }<br> #imageFlow {<br> position: absolute;<br> width: 100%;<br> height: 80%;<br> left: 0%;<br> top: 10%;<br> background: #000;<br> }<br> #imageFlow .diapo {<br> position: absolute;<br> left: -1000px;<br> cursor: pointer;<br> -ms-interpolation-mode: nearest-neighbor;<br> }<br> #imageFlow .link {<br> border: dotted #fff 1px;<br> margin-left: -1px;<br> margin-bottom: -1px;<br> }<br> #imageFlow .bank {<br> visibility: hidden;<br> }<br> #imageFlow .top {<br> position: absolute;<br> width: 100%;<br> height: 40%;<br> background: #181818;<br> }<br> #imageFlow .text {<br> position: absolute;<br> left: 0px;<br> width: 100%;<br> bottom: 16%;<br> text-align: center;<br> color: #FFF;<br> font-family: verdana, arial, Helvetica, sans-serif;<br> z-index: 1000;<br> }<br> #imageFlow .title {<br> font-size: 0.9em;<br> font-weight: bold;<br> }<br> #imageFlow .legend {<br> font-size: 0.8em;<br> }<br> #imageFlow .scrollbar {<br> position: absolute;<br> left: 10%;<br> bottom: 10%;<br> width: 80%;<br> height: 16px;<br> z-index: 1000;<br> }<br> #imageFlow .track {<br> position: absolute;<br> left: 1%;<br> width: 98%;<br> height: 16px;<br> filter: alpha(opacity=30);<br> opacity: 0.3;<br> }<br> #imageFlow .arrow-left {<br> position: absolute;<br> }<br> #imageFlow .arrow-right {<br> position: absolute;<br> right: 0px;<br> }<br> #imageFlow .bar {<br> position: absolute;<br> height: 16px;<br> left: 25px;<br> }<br></style><br><br><script type="text/javascript"><br><br>var imf = function () {<br> var lf = 0;<br> var instances = [];<br> function getElementsByClass (object, tag, className) {<br> var o = object.getElementsByTagName(tag);<br> for ( var i = 0, n = o.length, ret = []; i < n; i++)<br> if (o[i].className == className) ret.push(o[i]);<br> if (ret.length == 1) ret = ret[0];<br> return ret;<br> }<br> function addEvent (o, e, f) {<br> if (window.addEventListener) o.addEventListener(e, f, false);<br> else if (window.attachEvent) r = o.attachEvent('on' + e, f);<br> }<br> function createReflexion (cont, img) {<br> var flx = false;<br> if (document.createElement("canvas").getContext) {<br> flx = document.createElement("canvas");<br> flx.width = img.width;<br> flx.height = img.height;<br> var context = flx.getContext("2d");<br> context.translate(0, img.height);<br> context.scale(1, -1);<br> context.drawImage(img, 0, 0, img.width, img.height);<br> context.globalCompositeOperation = "destination-out";<br> var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);<br> gradient.addColorStop(1, "rgba(255, 255, 255, 0)");<br> gradient.addColorStop(0, "rgba(255, 255, 255, 1)");<br> context.fillStyle = gradient;<br> context.fillRect(0, 0, img.width, img.height * 2);<br> } else {<br> /* ---- DXImageTransform ---- */<br> flx = document.createElement('img');<br> flx.src = img.src;<br> flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +<br> 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +<br> (img.height * .25) + ')';<br> }<br> /* ---- insert Reflexion ---- */<br> flx.style.position = 'absolute';<br> flx.style.left = '-1000px';<br> cont.appendChild(flx);<br> return flx;<br> }<br> /* ==== ImageFlow Constructor ==== */<br> function ImageFlow(oCont, size, zoom, border) {<br> this.diapos = [];<br> this.scr = false;<br> this.size = size;<br> this.zoom = zoom;<br> this.bdw = border;<br> this.oCont = oCont;<br> this.oc = document.getElementById(oCont);<br> this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');<br> this.text = getElementsByClass(this.oc, 'div', 'text');<br> this.title = getElementsByClass(this.text, 'div', 'title');<br> this.legend = getElementsByClass(this.text, 'div', 'legend');<br> this.bar = getElementsByClass(this.oc, 'img', 'bar');<br> this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');<br> this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');<br> this.bw = this.bar.width;<br> this.alw = this.arL.width - 5;<br> this.arw = this.arR.width - 5;<br> this.bar.parent = this.oc.parent = this;<br> this.arL.parent = this.arR.parent = this;<br> this.view = this.back = -1;<br> this.resize();<br> this.oc.onselectstart = function () { return false; }<br> /* ---- create images ---- */<br> var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');<br> this.NF = img.length;<br> for (var i = 0, o; o = img[i]; i++) {<br> this.diapos[i] = new Diapo(this, i,<br> o.rel,<br> o.title || '- ' + i + ' -',<br> o.innerHTML || o.rel,<br> o.href || ',<br> o.target || '_self'<br> );<br> }<br> /* ==== add mouse wheel events ==== */<br> if (window.addEventListener)<br> this.oc.addEventListener('DOMMouseScroll', function(e) {<br> this.parent.scroll(-e.detail);<br> }, false);<br> else this.oc.onmousewheel = function () {<br> this.parent.scroll(event.wheelDelta);<br> }<br> /* ==== scrollbar drag N drop ==== */<br> this.bar.onmousedown = function (e) {<br> if (!e) e = window.event;<br> var scl = e.screenX - this.offsetLeft;<br> var self = this.parent;<br> /* ---- move bar ---- */<br> this.parent.oc.onmousemove = function (e) {<br> if (!e) e = window.event;<br> self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';<br> self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);<br> if (self.view != self.back) self.calc();<br> return false;<br> }<br> /* ---- release scrollbar ---- */<br> this.parent.oc.onmouseup = function (e) {<br> self.oc.onmousemove = null;<br> return false;<br> }<br> return false;<br> }<br> /* ==== right arrow ==== */<br> this.arR.onclick = this.arR.ondblclick = function () {<br> if (this.parent.view < this.parent.NF - 1)<br> this.parent.calc(1);<br> }<br> /* ==== Left arrow ==== */<br> this.arL.onclick = this.arL.ondblclick = function () {<br> if (this.parent.view > 0)<br> this.parent.calc(-1);<br> }<br> }<br> /* ==== ImageFlow prototype ==== */<br> ImageFlow.prototype = {<br> /* ==== targets ==== */<br> calc : function (inc) {<br> if (inc) this.view += inc;<br> var tw = 0;<br> var lw = 0;<br> var o = this.diapos[this.view];<br> if (o && o.loaded) {<br> /* ---- reset ---- */<br> var ob = this.diapos[this.back];<br> if (ob && ob != o) {<br> ob.img.className = 'diapo';<br> ob.z1 = 1;<br> }<br> /* ---- update legend ---- */<br> this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);<br> this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);<br> /* ---- update hyperlink ---- */<br> if (o.url) {<br> o.img.className = 'diapo link';<br> window.status = 'hyperlink: ' + o.url;<br> } else {<br> o.img.className = 'diapo';<br> window.status = ';<br> }<br> /* ---- calculate target sizes & positions ---- */<br> o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;<br> var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);<br> var x = x0 + o.w1 + this.bdw;<br> for (var i = this.view + 1, o; o = this.diapos[i]; i++) {<br> if (o.loaded) {<br> o.x1 = x;<br> o.w1 = (this.ht / o.r) * this.size;<br> x += o.w1 + this.bdw;<br> tw += o.w1 + this.bdw;<br> }<br> }<br> x = x0 - this.bdw;<br> for (var i = this.view - 1, o; o = this.diapos[i]; i--) {<br> if (o.loaded) {<br> o.w1 = (this.ht / o.r) * this.size;<br> o.x1 = x - o.w1;<br> x -= o.w1 + this.bdw;<br> tw += o.w1 + this.bdw;<br> lw += o.w1 + this.bdw;<br> }<br> }<br> /* ---- move scrollbar ---- */<br> if (!this.scr && tw) {<br> var r = (this.ws - this.alw - this.arw - this.bw) / tw;<br> this.bar.style.left = Math.round(this.alw + lw * r) + 'px';<br> }<br> /* ---- save preview view ---- */<br> this.back = this.view;<br> }<br> },<br> /* ==== mousewheel scrolling ==== */<br> scroll : function (sc) {<br> if (sc < 0) {<br> if (this.view < this.NF - 1) this.calc(1);<br> } else {<br> if (this.view > 0) this.calc(-1);<br> }<br> },<br> /* ==== resize ==== */<br> resize : function () {<br> this.wh = this.oc.clientWidth;<br> this.ht = this.oc.clientHeight;<br> this.ws = this.scrollbar.offsetWidth;<br> this.calc();<br> this.run(true);<br> },<br> /* ==== move all images ==== */<br> run : function (res) {<br> var i = this.NF;<br> while (i--) this.diapos[i].move(res);<br> }<br> }<br> /* ==== Diapo Constructor ==== */<br> Diapo = function (parent, N, src, title, text, url, target) {<br> this.parent = parent;<br> this.loaded = false;<br> this.title = title;<br> this.text = text;<br> this.url = url;<br> this.target = target;<br> this.N = N;<br> this.img = document.createElement('img');<br> this.img.src = src;<br> this.img.parent = this;<br> this.img.className = 'diapo';<br> this.x0 = this.parent.oc.clientWidth;<br> this.x1 = this.x0;<br> this.w0 = 0;<br> this.w1 = 0;<br> this.z1 = 1;<br> this.img.parent = this;<br> this.img.onclick = function() { this.parent.click(); }<br> this.parent.oc.appendChild(this.img);<br> /* ---- display external link ---- */<br> if (url) {<br> this.img.onmouseover = function () { this.className = 'diapo link'; }<br> this.img.onmouseout = function () { this.className = 'diapo'; }<br> }<br> }<br> /* ==== Diapo prototype ==== */<br> Diapo.prototype = {<br> /* ==== HTML rendering ==== */<br> move : function (res) {<br> if (this.loaded) {<br> var sx = this.x1 - this.x0;<br> var sw = this.w1 - this.w0;<br> if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {<br> /* ---- paint only when moving ---- */<br> this.x0 += sx * .1;<br> this.w0 += sw * .1;<br> if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {<br> /* ---- paint only visible images ---- */<br> this.visible = true;<br> var o = this.img.style;<br> var h = this.w0 * this.r;<br> /* ---- diapo ---- */<br> o.left = Math.round(this.x0) + 'px';<br> o.bottom = Math.floor(this.parent.ht * .25) + 'px';<br> o.width = Math.round(this.w0) + 'px';<br> o.height = Math.round(h) + 'px';<br> /* ---- reflexion ---- */<br> if (this.flx) {<br> var o = this.flx.style;<br> o.left = Math.round(this.x0) + 'px';<br> o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';<br> o.width = Math.round(this.w0) + 'px';<br> o.height = Math.round(h) + 'px';<br> }<br> } else {<br> /* ---- disable invisible images ---- */<br> if (this.visible) {<br> this.visible = false;<br> this.img.style.width = '0px';<br> if (this.flx) this.flx.style.width = '0px';<br> }<br> }<br> }<br> } else {<br> /* ==== image onload ==== */<br> if (this.img.complete && this.img.width) {<br> /* ---- get size image ---- */<br> this.iw = this.img.width;<br> this.ih = this.img.height;<br> this.r = this.ih / this.iw;<br> this.loaded = true;<br> /* ---- create reflexion ---- */<br> this.flx = createReflexion(this.parent.oc, this.img);<br> if (this.parent.view < 0) this.parent.view = this.N;<br> this.parent.calc();<br> }<br> }<br> },<br> /* ==== diapo onclick ==== */<br> click : function () {<br> if (this.parent.view == this.N) {<br> /* ---- click on zoomed diapo ---- */<br> if (this.url) {<br> /* ---- open hyperlink ---- */<br> window.open(this.url, this.target);<br> } else {<br> /* ---- zoom in/out ---- */<br> this.z1 = this.z1 == 1 ? this.parent.zoom : 1;<br> this.parent.calc();<br> }<br> } else {<br> /* ---- select diapo ---- */<br> this.parent.view = this.N;<br> this.parent.calc();<br> }<br> return false;<br> }<br> }<br> /* ==== public methods ==== */<br> return {<br> /* ==== initialize script ==== */<br> create : function (div, size, zoom, border) {<br> /* ---- instanciate imageFlow ---- */<br> var load = function () {<br> var loaded = false;<br> var i = instances.length;<br> while (i--) if (instances[i].oCont == div) loaded = true;<br> if (!loaded) {<br> /* ---- push new imageFlow instance ---- */<br> instances.push(<br> new ImageFlow(div, size, zoom, border)<br> );<br> /* ---- init script (once) ---- */<br> if (!imf.initialized) {<br> imf.initialized = true;<br> /* ---- window resize event ---- */<br> addEvent(window, 'resize', function () {<br> var i = instances.length;<br> while (i--) instances[i].resize();<br> });<br> /* ---- stop drag N drop ---- */<br> addEvent(document.getElementById(div), 'mouseout', function (e) {<br> if (!e) e = window.event;<br> var tg = e.relatedTarget || e.toElement;<br> if (tg && tg.tagName == 'HTML') {<br> var i = instances.length;<br> while (i--) instances[i].oc.onmousemove = null;<br> }<br> return false;<br> });<br> /* ---- set interval loop ---- */<br> setInterval(function () {<br> var i = instances.length;<br> while (i--) instances[i].run();<br> }, 16);<br> }<br> }<br> }<br> /* ---- window onload event ---- */<br> addEvent(window, 'load', function () { load(); });<br> }<br> }<br>}();<br><br>/* ==== create imageFlow ==== */<br>// div ID , size, zoom, border<br>imf.create("imageFlow", 0.15, 1.5, 10);<br><br></script><br></head><br><br><body><br> <div id="imageFlow"><br> <div class="top"></div><br> <div class="bank"><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> <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><br> </div><br><br> <div class="text"><br> <div class="title">Loading</div><br> <div class="legend">Please wait...</div><br> </div><br> <div class="scrollbar"><br> <img class="track" src="http://preview.zcool.com.cn/code/js/04/1/sb.gif" alt=""><br> <img class="arrow-left" src="http://preview.zcool.com.cn/code/js/04/1/sl.gif" alt=""><br> <img class="arrow-right" src="http://preview.zcool.com.cn/code/js/04/1/sr.gif" alt=""><br> <img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt=""><br> </div><br> </div><br></body><br></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"><br><html><br><head><br><title>2</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br> body {<br> background: #222;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br> .spanSlide {<br> position: absolute;<br> background: #000;<br> font-size: 1px;<br> overflow: hidden;<br> }<br> .imgSlide {<br> position: absolute;<br> left: 5%;<br> top: 5%;<br> width: 90%;<br> height: 90%;<br> overflow: hidden;<br> }<br> .txtSlide {<br> position: absolute;<br> top: 5%;<br> left: 50px;<br> width:100%;<br> color:#FFF;<br> font-family: arial, helvetica, verdana, sans-serif;<br> font-weight: bold;<br> font-size:96px;<br> letter-spacing:12px;<br> filter: alpha(opacity=70);<br> -moz-opacity:0.7;<br> opacity:0.7;<br> }<br></style><br><br><script type="text/javascript"><br><br>var ym=0;<br>var ny=0;<br><br>createElement = function(container, type, param){<br> o=document.createElement(type);<br> for(var i in param)o[i]=param[i];<br> container.appendChild(o);<br> return o;<br>}<br><br>mooz = {<br> O:[],<br> /<br> mult:6,<br> nbI:5,<br> /<br> rwh:0,<br> imgsrc:0,<br> W:0,<br> H:0,<br><br> Xoom:function(N){<br> this.o = createElement(document.getElementById("screen"), "span", {<br> 'className':'spanSlide'<br> });<br> img = createElement(this.o, "img", {<br> 'className':"imgSlide",<br> 'src':mooz.imgsrc[N%mooz.imgsrc.length].src<br> });<br> spa = createElement(this.o, "span", {<br> 'className':"imgSlide"<br> });<br> txt = createElement(spa, "span", {<br> 'className':"txtSlide",<br> 'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title<br> });<br> this.N = 10000+N;<br> },<br><br> mainloop:function(){<br> with(this){<br> for(i=0; i<mooz.nbI; i++) {<br> O[i].N += (ym-ny)/8000;<br> N = O[i].N%nbI;<br> ti = Math.pow(mult,N);<br> with(O[i].o.style){<br> left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";<br> top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";<br> zIndex = Math.round(10000-ti*.1);<br> width = Math.round(ti*rwh)+"px";<br> height = Math.round(ti)+"px";<br> }<br> }<br> }<br> setTimeout("mooz.mainloop();", 16);<br> },<br><br> oigres:function(){<br> with(this){<br> W = parseInt(document.getElementById("screen").style.width);<br> H = parseInt(document.getElementById("screen").style.height);<br> imgsrc = document.getElementById("images").getElementsByTagName("img");<br> rwh = imgsrc[0].width/imgsrc[0].height;<br> for(var i=0;i<nbI;i++) O[i] = new Xoom(i);<br> mainloop();<br> }<br> }<br>}<br><br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> ym = (e.y || e.clientY);<br> if(ym/2>ny)ny=ym/2;<br>}<br><br>window.onload = function(){<br> ym = ny+50;<br> mooz.oigres();<br>}<br><br></script><br></head><br><br><body><br><br><div style="position:absolute;left:50%;top:50%"><br> <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div><br> <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div><br> <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div><br></div><br><br><div id="images" style="visibility:hidden"><br> <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg"><br> <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg"><br> <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg"><br> <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg"><br> <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg"><br></div><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>3</title><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br><br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> position: absolute;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br><br> #diapoContainer {<br> position: absolute;<br> left: 10%;<br> top: 10%;<br> width: 80%;<br> height: 80%;<br> background: #222;<br> overflow: hidden;<br> }<br><br> .imgDC {<br> position: absolute;<br> cursor: pointer;<br> border: #000 solid 2px;<br> filter: alpha(opacity=90);<br> opacity: 0.9;<br> visibility: hidden;<br> }<br><br> .spaDC {<br> position: absolute;<br> filter: alpha(opacity=20);<br> opacity: 0.2;<br> background: #000;<br> visibility: hidden;<br> }<br><br> .imgsrc {<br> position: absolute;<br> width: 120px;<br> height: 67px;<br> visibility: hidden;<br> margin: 4%;<br> }<br><br> #bkgcaption {<br> position: absolute;<br> bottom: 0px;<br> left: 0px;<br> width: 100%;<br> height: 6%;<br> background:#1a1a1a;<br> }<br> #caption {<br> position: absolute;<br> font-family: arial, helvetica, verdana, sans-serif;<br> white-space: nowrap;<br> color: #fff;<br> bottom: 0px;<br> width: 100%;<br> left: -10000px;<br> text-align: center;<br> }<br><br></style><br><br><script type="text/javascript"><br>var xm;<br>var ym;<br><br>/* ==== onmousemove event ==== */<br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> xm = (e.x || e.clientX);<br> ym = (e.y || e.clientY);<br>}<br><br>/* ==== window resize ==== */<br>function resize() {<br> if(diapo)diapo.resize();<br>}<br>onresize = resize;<br><br>/* ==== opacity ==== */<br>setOpacity = function(o, alpha){<br> if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;<br>}<br><br><br><br>/* ===== encapsulate script ==== */<br>diapo = {<br> O : [],<br> DC : 0,<br> img : 0,<br> txt : 0,<br> N : 0,<br> xm : 0,<br> ym : 0,<br> nx : 0,<br> ny : 0,<br> nw : 0,<br> nh : 0,<br> rs : 0,<br> rsB : 0,<br> zo : 0,<br> tx_pos : 0,<br> tx_var : 0,<br> tx_target : 0,<br><br> /// script parameters <br> attraction : 2,<br> acceleration : .9,<br> dampening : .1,<br> zoomOver : 2,<br> zoomClick : 6,<br> transparency : .8,<br> font_size: 18,<br> //<br><br> /* ==== diapo resize ==== */<br> resize : function(){<br> with(this){<br> nx = DC.offsetLeft;<br> ny = DC.offsetTop;<br> nw = DC.offsetWidth;<br> nh = DC.offsetHeight;<br> txt.style.fontSize = Math.round(nh / font_size) + "px";<br> if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();<br> rsB = rs;<br> }<br> },<br><br> /* ==== create diapo ==== */<br> CDiapo : function(o){<br> /* ==== init variables ==== */<br> this.o = o;<br> this.x_pos = this.y_pos = 0;<br> this.x_origin = this.y_origin = 0;<br> this.x_var = this.y_var = 0;<br> this.x_target = this.y_target = 0;<br> this.w_pos = this.h_pos = 0;<br> this.w_origin = this.h_origin = 0;<br> this.w_var = this.h_var = 0;<br> this.w_target = this.h_target = 0;<br> this.over = false;<br> this.click = false;<br><br> /* ==== create shadow ==== */<br> this.spa = document.createElement("span");<br> this.spa.className = "spaDC";<br> diapo.DC.appendChild(this.spa);<br><br> /* ==== create thumbnail image ==== */<br> this.img = document.createElement("img");<br> this.img.className = "imgDC";<br> this.img.src = o.src;<br> this.img.O = this;<br> diapo.DC.appendChild(this.img);<br> setOpacity(this.img, diapo.transparency);<br><br> /* ==== mouse events ==== */<br> this.img.onselectstart = new Function("return false;");<br> this.img.ondrag = new Function("return false;");<br> this.img.onmouseover = function(){<br> diapo.tx_target=0;<br> diapo.txt.innerHTML=this.O.o.alt;<br> this.O.over=true;<br> setOpacity(this,this.O.click?diapo.transparency:1);<br> }<br> this.img.onmouseout = function(){<br> diapo.tx_target=-diapo.nw;<br> this.O.over=false;<br> setOpacity(this,diapo.transparency);<br> }<br> this.img.onclick = function() {<br> if(!this.O.click){<br> if(diapo.zo && diapo.zo != this) diapo.zo.onclick();<br> this.O.click = true;<br> this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;<br> this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;<br> diapo.zo = this;<br> setOpacity(this,diapo.transparency);<br> } else {<br> this.O.click = false;<br> this.O.over = false;<br> this.O.resize();<br> diapo.zo = 0;<br> }<br> }<br><br> /* ==== rearrange thumbnails based on "imgsrc" images position ==== */<br> this.resize = function (){<br> with (this) {<br> x_origin = o.offsetLeft;<br> y_origin = o.offsetTop;<br> w_origin = o.offsetWidth;<br> h_origin = o.offsetHeight;<br> }<br> }<br><br> /* ==== animation function ==== */<br> this.position = function (){<br> with (this) {<br> /* ==== set target position ==== */<br> w_target = w_origin;<br> h_target = h_origin;<br> if(over){<br> /* ==== mouse over ==== */<br> w_target = w_origin * diapo.zoomOver;<br> h_target = h_origin * diapo.zoomOver;<br> x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));<br> y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));<br> } else {<br> /* ==== mouse out ==== */<br> x_target = x_origin;<br> y_target = y_origin;<br> }<br> if(click){<br> /* ==== clicked ==== */<br> w_target = w_origin * diapo.zoomClick;<br> h_target = h_origin * diapo.zoomClick;<br> }<br><br> /* ==== magic spring equations ==== */<br> x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;<br> y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;<br> w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);<br> h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);<br> diapo.rs += (Math.abs(x_var) + Math.abs(y_var));<br><br> /* ==== html animation ==== */<br> with(img.style){<br> left = Math.round(x_pos) + "px";<br> top = Math.round(y_pos) + "px";<br> width = Math.round(Math.max(0, w_pos)) + "px";<br> height = Math.round(Math.max(0, h_pos)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> with(spa.style){<br> left = Math.round(x_pos + w_pos * .1) + "px";<br> top = Math.round(y_pos + h_pos * .1) + "px";<br> width = Math.round(Math.max(0, w_pos * 1.1)) + "px";<br> height = Math.round(Math.max(0, h_pos * 1.1)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> }<br> }<br> },<br><br> /* ==== main loop ==== */<br> run : function(){<br> diapo.xm = xm - diapo.nx;<br> diapo.ym = ym - diapo.ny;<br> /* ==== caption anim ==== */<br> diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;<br> diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";<br> /* ==== images anim ==== */<br> for(var i in diapo.O) diapo.O[i].position();<br> /* ==== loop ==== */<br> setTimeout("diapo.run();", 16);<br> },<br><br> /* ==== load images ==== */<br> images_load : function(){<br> // ===== loop until all images are loaded =====<br> var M = 0;<br> for(var i=0; i<diapo.N; i++) {<br> if(diapo.img[i].complete) {<br> diapo.img[i].style.position = "relative";<br> diapo.O[i].img.style.visibility = "visible";<br> diapo.O[i].spa.style.visibility = "visible";<br> M++;<br> }<br> resize();<br> }<br> if(M<diapo.N) setTimeout("diapo.images_load();", 128);<br> },<br><br> /* ==== init script ==== */<br> init : function() {<br> diapo.DC = document.getElementById("diapoContainer");<br> diapo.img = diapo.DC.getElementsByTagName("img");<br> diapo.txt = document.getElementById("caption");<br> diapo.N = diapo.img.length;<br> for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));<br> diapo.resize();<br> diapo.tx_pos = -diapo.nw;<br> diapo.tx_target = -diapo.nw;<br> diapo.images_load();<br> diapo.run();<br> }<br>}<br><br></script><br></head><br><br><body><br><br><div id="diapoContainer"><br><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"><br><br> <div id="bkgcaption"></div><br> <div id="caption"></div><br><br></div><br><br><script type="text/javascript"><br>/* ==== start script ==== */<br>function dom_onload() {<br> if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);<br>}<br>dom_onload();<br></script><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>3</title><br><style type="text/css"><br> html {<br> overflow: hidden;<br> }<br><br> body {<br> margin: 0px;<br> padding: 0px;<br> background: #000;<br> position: absolute;<br> width: 100%;<br> height: 100%;<br> cursor: crosshair;<br> }<br><br> #diapoContainer {<br> position: absolute;<br> left: 10%;<br> top: 10%;<br> width: 80%;<br> height: 80%;<br> background: #222;<br> overflow: hidden;<br> }<br><br> .imgDC {<br> position: absolute;<br> cursor: pointer;<br> border: #000 solid 2px;<br> filter: alpha(opacity=90);<br> opacity: 0.9;<br> visibility: hidden;<br> }<br><br> .spaDC {<br> position: absolute;<br> filter: alpha(opacity=20);<br> opacity: 0.2;<br> background: #000;<br> visibility: hidden;<br> }<br><br> .imgsrc {<br> position: absolute;<br> width: 120px;<br> height: 67px;<br> visibility: hidden;<br> margin: 4%;<br> }<br><br> #bkgcaption {<br> position: absolute;<br> bottom: 0px;<br> left: 0px;<br> width: 100%;<br> height: 6%;<br> background:#1a1a1a;<br> }<br> #caption {<br> position: absolute;<br> font-family: arial, helvetica, verdana, sans-serif;<br> white-space: nowrap;<br> color: #fff;<br> bottom: 0px;<br> width: 100%;<br> left: -10000px;<br> text-align: center;<br> }<br><br></style><br><br><script type="text/javascript"><br>var xm;<br>var ym;<br><br>/* ==== onmousemove event ==== */<br>document.onmousemove = function(e){<br> if(window.event) e=window.event;<br> xm = (e.x || e.clientX);<br> ym = (e.y || e.clientY);<br>}<br><br>/* ==== window resize ==== */<br>function resize() {<br> if(diapo)diapo.resize();<br>}<br>onresize = resize;<br><br>/* ==== opacity ==== */<br>setOpacity = function(o, alpha){<br> if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;<br>}<br><br><br><br>/* ===== encapsulate script ==== */<br>diapo = {<br> O : [],<br> DC : 0,<br> img : 0,<br> txt : 0,<br> N : 0,<br> xm : 0,<br> ym : 0,<br> nx : 0,<br> ny : 0,<br> nw : 0,<br> nh : 0,<br> rs : 0,<br> rsB : 0,<br> zo : 0,<br> tx_pos : 0,<br> tx_var : 0,<br> tx_target : 0,<br><br> /// script parameters <br> attraction : 2,<br> acceleration : .9,<br> dampening : .1,<br> zoomOver : 2,<br> zoomClick : 6,<br> transparency : .8,<br> font_size: 18,<br> //<br><br> /* ==== diapo resize ==== */<br> resize : function(){<br> with(this){<br> nx = DC.offsetLeft;<br> ny = DC.offsetTop;<br> nw = DC.offsetWidth;<br> nh = DC.offsetHeight;<br> txt.style.fontSize = Math.round(nh / font_size) + "px";<br> if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();<br> rsB = rs;<br> }<br> },<br><br> /* ==== create diapo ==== */<br> CDiapo : function(o){<br> /* ==== init variables ==== */<br> this.o = o;<br> this.x_pos = this.y_pos = 0;<br> this.x_origin = this.y_origin = 0;<br> this.x_var = this.y_var = 0;<br> this.x_target = this.y_target = 0;<br> this.w_pos = this.h_pos = 0;<br> this.w_origin = this.h_origin = 0;<br> this.w_var = this.h_var = 0;<br> this.w_target = this.h_target = 0;<br> this.over = false;<br> this.click = false;<br><br> /* ==== create shadow ==== */<br> this.spa = document.createElement("span");<br> this.spa.className = "spaDC";<br> diapo.DC.appendChild(this.spa);<br><br> /* ==== create thumbnail image ==== */<br> this.img = document.createElement("img");<br> this.img.className = "imgDC";<br> this.img.src = o.src;<br> this.img.O = this;<br> diapo.DC.appendChild(this.img);<br> setOpacity(this.img, diapo.transparency);<br><br> /* ==== mouse events ==== */<br> this.img.onselectstart = new Function("return false;");<br> this.img.ondrag = new Function("return false;");<br> this.img.onmouseover = function(){<br> diapo.tx_target=0;<br> diapo.txt.innerHTML=this.O.o.alt;<br> this.O.over=true;<br> setOpacity(this,this.O.click?diapo.transparency:1);<br> }<br> this.img.onmouseout = function(){<br> diapo.tx_target=-diapo.nw;<br> this.O.over=false;<br> setOpacity(this,diapo.transparency);<br> }<br> this.img.onclick = function() {<br> if(!this.O.click){<br> if(diapo.zo && diapo.zo != this) diapo.zo.onclick();<br> this.O.click = true;<br> this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;<br> this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;<br> diapo.zo = this;<br> setOpacity(this,diapo.transparency);<br> } else {<br> this.O.click = false;<br> this.O.over = false;<br> this.O.resize();<br> diapo.zo = 0;<br> }<br> }<br><br> /* ==== rearrange thumbnails based on "imgsrc" images position ==== */<br> this.resize = function (){<br> with (this) {<br> x_origin = o.offsetLeft;<br> y_origin = o.offsetTop;<br> w_origin = o.offsetWidth;<br> h_origin = o.offsetHeight;<br> }<br> }<br><br> /* ==== animation function ==== */<br> this.position = function (){<br> with (this) {<br> /* ==== set target position ==== */<br> w_target = w_origin;<br> h_target = h_origin;<br> if(over){<br> /* ==== mouse over ==== */<br> w_target = w_origin * diapo.zoomOver;<br> h_target = h_origin * diapo.zoomOver;<br> x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));<br> y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));<br> } else {<br> /* ==== mouse out ==== */<br> x_target = x_origin;<br> y_target = y_origin;<br> }<br> if(click){<br> /* ==== clicked ==== */<br> w_target = w_origin * diapo.zoomClick;<br> h_target = h_origin * diapo.zoomClick;<br> }<br><br> /* ==== magic spring equations ==== */<br> x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;<br> y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;<br> w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);<br> h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);<br> diapo.rs += (Math.abs(x_var) + Math.abs(y_var));<br><br> /* ==== html animation ==== */<br> with(img.style){<br> left = Math.round(x_pos) + "px";<br> top = Math.round(y_pos) + "px";<br> width = Math.round(Math.max(0, w_pos)) + "px";<br> height = Math.round(Math.max(0, h_pos)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> with(spa.style){<br> left = Math.round(x_pos + w_pos * .1) + "px";<br> top = Math.round(y_pos + h_pos * .1) + "px";<br> width = Math.round(Math.max(0, w_pos * 1.1)) + "px";<br> height = Math.round(Math.max(0, h_pos * 1.1)) + "px";<br> zIndex = Math.round(w_pos);<br> }<br> }<br> }<br> },<br><br> /* ==== main loop ==== */<br> run : function(){<br> diapo.xm = xm - diapo.nx;<br> diapo.ym = ym - diapo.ny;<br> /* ==== caption anim ==== */<br> diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;<br> diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";<br> /* ==== images anim ==== */<br> for(var i in diapo.O) diapo.O[i].position();<br> /* ==== loop ==== */<br> setTimeout("diapo.run();", 16);<br> },<br><br> /* ==== load images ==== */<br> images_load : function(){<br> // ===== loop until all images are loaded =====<br> var M = 0;<br> for(var i=0; i<diapo.N; i++) {<br> if(diapo.img[i].complete) {<br> diapo.img[i].style.position = "relative";<br> diapo.O[i].img.style.visibility = "visible";<br> diapo.O[i].spa.style.visibility = "visible";<br> M++;<br> }<br> resize();<br> }<br> if(M<diapo.N) setTimeout("diapo.images_load();", 128);<br> },<br><br> /* ==== init script ==== */<br> init : function() {<br> diapo.DC = document.getElementById("diapoContainer");<br> diapo.img = diapo.DC.getElementsByTagName("img");<br> diapo.txt = document.getElementById("caption");<br> diapo.N = diapo.img.length;<br> for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));<br> diapo.resize();<br> diapo.tx_pos = -diapo.nw;<br> diapo.tx_target = -diapo.nw;<br> diapo.images_load();<br> diapo.run();<br> }<br>}<br><br></script><br></head><br><br><body><br><br><div id="diapoContainer"><br><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"><br> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"><br><br> <div id="bkgcaption"></div><br> <div id="caption"></div><br><br></div><br><br><script type="text/javascript"><br>/* ==== start script ==== */<br>function dom_onload() {<br> if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);<br>}<br>dom_onload();<br></script><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br><html><br><head><br><title>4</title><br><meta http-equiv="imagetoolbar" content="no"><br><style type="text/css"><br> body {<br> background: #222;<br> overflow: hidden;<br> left: 0;<br> top: 0;<br> width: 100%;<br> height: 100%;<br> margin: 0;<br> padding: 0;<br> }<br><br> #screen img {<br> position: absolute;<br> visibility: hidden;<br> }<br><br> #screen span {<br> position: absolute;<br> background: #fff;<br> cursor: pointer;<br> visibility: hidden;<br> filter: alpha(opacity=80);<br> -moz-opacity: 0.8;<br> opacity: 0.8;<br> }<br></style><br><br><script type="text/javascript"><!--<br>var Oz, Ov;<br>var obj = [];<br>var K = 0;<br>var img, scr, W, H;<br>var SP = 40; /* speed */<br>var dz = false;<br><br>/* html positioning */<br>position = function(obj, x, y, w, h)<br>{<br> with(obj.style){<br> left = Math.round(x) + "px";<br> top = Math.round(y) + "px";<br> width = Math.round(w) + "px";<br> height = Math.round(h) + "px";<br> }<br>}<br><br>/* create object instances */<br>function Cobj(parent, N, x, y, w, h)<br>{<br> this.zoomed = (parent ? 0 : 1);<br> obj[K] = this;<br> this.K = K ++;<br> this.parent = parent;<br> this.children = [];<br> this.x = x;<br> this.y = y;<br> this.w = w;<br> this.h = h;<br> this.vx = 0;<br> this.vy = 0;<br> this.vw = 0;<br> this.vh = 0;<br> this.xi = 0;<br> this.yi = 0;<br> this.wi = 0;<br> this.hi = 0;<br> this.x1 = 0;<br> this.y1 = 0;<br> this.w1 = 0;<br> this.h1 = 0;<br> this.x0 = 0;<br> this.y0 = 0;<br> this.w0 = 0;<br> this.h0 = 0;<br> this.imgsrc = img[N];<br><br> /* create HTML elements */<br> this.img = document.createElement("img");<br> this.img.src = this.imgsrc.src;<br> this.img.obj = this;<br> scr.appendChild(this.img);<br> this.spa = document.createElement("span");<br> this.spa.style.cursor = "pointer";<br> this.spa.obj = this;<br> scr.appendChild(this.spa);<br> if (parent) parent.children.push(this);<br><br> /* Flickr */<br> this.blink = function()<br> {<br> with(this)<br> {<br> position(spa, x0, y0, w0, h0);<br> spa.style.visibility = "visible";<br> img.style.cursor = "pointer";<br> setTimeout("obj[" + K + "].spa.style.visibility='hidden'", 128);<br> }<br> }<br><br> /* display image & children */<br> this.display = function(zoomed)<br> {<br> with(this)<br> {<br> position(img, x0, y0, w0, h0);<br> img.style.visibility = "visible";<br> if (parent && ! zoomed)<br> {<br> blink();<br> Ov = img;<br> }<br> }<br> }<br><br> /* init zoom */<br> this.init_zoom = function(d)<br> {<br> with(this)<br> {<br> w1 = imgsrc.width;<br> h1 = imgsrc.height;<br> x1 = (W - w1) / 2;<br> y1 = (H - h1) / 2;<br> x0 = (parent ? x + parent.x1 : (W - w1) / 2);<br> y0 = (parent ? y + parent.y1 : (H - h1) / 2);<br> w0 = (parent ? w : w1);<br> h0 = (parent ? h : h1);<br> xi = d > 0 ? x0 : x1;<br> yi = d > 0 ? y0 : y1;<br> wi = d > 0 ? w0 : w1;<br> hi = d > 0 ? h0 : h1;<br> vx = d * (x1 - x0) / SP;<br> vy = d * (y1 - y0) / SP;<br> vw = d * (w1 - w0) / SP;<br> vh = d * (h1 - h0) / SP;<br> parent.vx = d * ((x1 - (x * w1 / w0)) - parent.x1) / SP;<br> parent.vy = d * ((y1 - (y * h1 / h0)) - parent.y1) / SP;<br> parent.vw = vw * (parent ? (parent.w1 / w) : 0);<br> parent.vh = vh * (parent ? (parent.h1 / h) : 0);<br> }<br> }<br><br> /* animate zoom in - out */<br> this.zoom = function()<br> {<br> with(this)<br> {<br> xi += vx;<br> yi += vy;<br> wi += vw;<br> hi += vh;<br><br> parent.xi += parent.vx;<br> parent.yi += parent.vy;<br> parent.wi += parent.vw;<br> parent.hi += parent.vh;<br><br> position(img, xi, yi, wi, hi);<br> position(parent.img, parent.xi, parent.yi, parent.wi, parent.hi);<br><br> if ((zoomed == 0 && wi > w0 - vw) || (zoomed == 1 && wi < w1 - vw))<br> {<br> setTimeout("obj[" + K + "].zoom()", 16);<br> }<br> else<br> {<br> dz = false;<br> for (var i in Oz.children)<br> {<br> Oz.children[i].init_zoom();<br> Oz.children[i].display(false, false);<br> }<br> }<br> }<br> }<br><br> /* mouse events */<br> this.img.onmouseover = function()<br> {<br> if (this != Ov) with(this.obj) if (parent && ! zoomed && ! dz) blink();<br> Ov = this;<br> return false;<br> }<br><br> this.img.onclick = function()<br> {<br> with(this.obj)<br> {<br> if (parent && !dz && imgsrc.complete)<br> {<br> if (zoomed == 1)<br> {<br> /* zoom out */<br> Oz = this.obj.parent;<br> zoomed = 0;<br> init_zoom( -1);<br> for (var i in children) children[i].img.style.visibility = "hidden";<br> parent.zoomed = 1;<br> dz = true;<br> zoom();<br> }<br> else if (zoomed == 0)<br> {<br> /* zoom in */<br> Oz = this.obj;<br> img.style.cursor = "crosshair";<br> zoomed = 1;<br> init_zoom(1);<br> for (var i in parent.children)<br> {<br> if (this.obj != parent.children[i])<br> parent.children[i].img.style.visibility = "hidden";<br> }<br> parent.zoomed = -1;<br> dz = true;<br> zoom();<br> }<br> }<br> }<br> return false;<br> }<br><br> this.spa.onmousedown = function()<br> {<br> this.style.visibility="hidden";<br> this.obj.img.onclick();<br> return false;<br> }<br>}<br><br>/* initialization */<br>/* must start after the first image is loaded */<br>function starter()<br>{<br> scr = document.getElementById("screen");<br> img = document.getElementById("images").getElementsByTagName("img");<br> W = parseInt(scr.style.width);<br> H = parseInt(scr.style.height);<br><br> /* ==== tree-zoom ==== */<br> // new Cobj(parent, image, x, y, w, h)<br> O = new Cobj(0, 0, 0, 0, 0, 0);<br> O0 = new Cobj(O, 1, 127, 98, 181, 134);<br> O1 = new Cobj(O0, 2, 158, 150, 85, 155);<br> O11 = new Cobj(O1, 4, 136, 98, 80, 196);<br> O111 = new Cobj(O11, 5, 20, 154, 70, 57);<br> O1111 = new Cobj(O111, 6, 161, 137, 154, 76);<br> O112 = new Cobj(O11, 11, 155, 154, 70, 57);<br> O1121 = new Cobj(O112, 12, 273, 116, 49, 72);<br> O2 = new Cobj(O0, 3, 281, 150, 90, 154);<br> O21 = new Cobj(O2, 7, 35, 295, 133, 82);<br> O211 = new Cobj(O21, 15, 316, 183, 20, 36);<br> O22 = new Cobj(O2, 8, 179, 295, 127, 79);<br> O221 = new Cobj(O22, 13, 132, 84, 54, 102);<br> O2211 = new Cobj(O221, 14, 6, 234, 69, 50);<br> O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);<br> O23 = new Cobj(O2, 9, 92, 148, 138, 76);<br> O231 = new Cobj(O23, 10, 249, 106, 83, 65);<br> O2311 = new Cobj(O231, 0, 120, 87, 57, 59);<br><br> /* display */<br> O.init_zoom(1);<br> O.display(true);<br> for (var i in O.children)<br> {<br> O.children[i].init_zoom(1);<br> O.children[i].display(true);<br> }<br>}<br>//--><br></script><br></head><br><br><body><br><br> <div style="position:absolute;left:50%;top:50%"><br> <div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div><br> <div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden"><br><br> </div><br> </div><br><br> <div id="images" style="position:absolute;left:-10000px;top:-10000px;"><br> <img οnlοad="setTimeout('starter();',500)" src="http://preview.zcool.com.cn/code/js/04/4/wi37.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg"><br> <img src="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg"><br> </div><br><br></body><br></html>
? ? ?提示：您可以先修改部分代碼再運行
本文轉自
http://bbs.51js.com/thread-77249-1-1.html
總結
以上是生活随笔為你收集整理的[推荐]令人震撼的图片展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery 实现省市二级联动
- 下一篇： 30s倒计时