船长 发表于 2009-02-21 10:41 | 分类：javascript | 阅读数：582 次
10款让你震撼的图片展示js代码，第九部分了，依然延续以前的次次震撼的特色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>9</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #screen { position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; background: #000; color: #fff; } #screen div { position: absolute; overflow: hidden; cursor: pointer; } #screen img { position: absolute; width: 100%; height: 100%; } #screen .label { position: absolute; color: #FFF; background: #000; font-family: arial; white-space: no-wrap; } </style> <!-- dhteumeuleu utilities --> <script type="text/javascript" src="http://www.songlecn.com/wp-content/supload/2009/02/21/dhteumeuleu.js"></script> <script type="text/javascript"> // ======================================================== // ====== Javascript Slideshow ====== // script written by Gerard Ferrandez - December 31, 2006 // http://www.dhteumeuleu.com/ // ======================================================== var diap = { ///////////////////////////////// BR : 3, // border size in px ZR : .75, // zoom ratio SP : .1, // speed ///////////////////////////////// V : false, S : false, G : true, resize : function () { /* ==== window resize event ==== */ diap.nw = diap.scr.offsetWidth; diap.nh = diap.scr.offsetHeight; diap.nwu = (diap.nw * diap.ZR); diap.nhu = (diap.nh * diap.ZR); diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR; diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR; diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt); if (diap.N) { diap.setPosition(); if (!diap.G) diap.delLabels(); } }, setPosition : function () { /* ==== calculate image target position ==== */ var k = 0; var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0; for (var j = 0; j < this.NY; j++) { var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0; for (var i = 0; i < this.NX; i++) { var o = this.spa[k++]; o.y1 = y; o.x1 = x; o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR; o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR; x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX); } y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY); } }, delLabels : function () { /* ==== remove texts ==== */ for ( var i = 0; i < diap.N; i++) { var o = diap.spa[i]; if (o.T) diap.scr.removeChild(o.T); o.T = false; } }, run : function () { /* ==== main loop ==== */ for ( var i = 0; i < diap.N; i++) diap.spa[i].move(); setTimeout(diap.run, 16); }, init : function (container, NX, NY, path, images) { /* ==== initialize script ==== */ this.scr = id(container); if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; } this.NX = NX; this.NY = NY; this.spa = {}; this.resize(); var k = 0; for (var y = 0; y < this.NY; y++) { for (var x = 0; x < this.NX; x++) { /* ==== create HTML elements ==== */ var s = this.spa[k] = document.createElement('div'); s.img = document.createElement('img'); /* ==== opacity optimized function ==== */ s.img.setOpacity = function (alpha) { if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100; if (alpha == 100) { /* ==== speed opt - remove IE filter ==== */ this.style.visibility = 'visible'; this.style.filter = ''; this.style.opacity = 1; return 100; } else if (alpha == 0) { /* ==== hide image, remove opacity ==== */ this.style.visibility = 'hidden'; this.style.filter = ''; this.style.opacity = 0; return 0; } if (this.filters) { /* ==== IE filter ==== */ if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')'; else this.filters.alpha.opacity = alpha; /* ==== CSS opacity ==== */ } else this.style.opacity = alpha * .01; return alpha; } s.img.src = id('loading').src; s.appendChild(s.img); this.scr.appendChild(s); /* ==== pre-load image ==== */ s.pre = new Image(); s.pre.obj = s; s.pre.onload = function() { this.obj.img.src = this.src; } s.pre.src = path + images[k][0]; /* ==== set image variables ==== */ s.x = x; s.y = y; s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2; s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;; s.x1 = x * (this.nw / this.NX); s.y1 = y * (this.nh / this.NY); s.w0 = 0; s.h0 = 0; s.w1 = 0; s.h1 = 0; s.V = 0; s.t = images[k][1]; s.T = false; /* ==== function move image ==== */ s.move = function() { /* ==== position images ==== */ this.style.left = px(this.x0 += (this.x1 - this.x0) * diap.SP); this.style.top = px(this.y0 += (this.y1 - this.y0) * diap.SP); this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP); this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP); if (this != diap.S) { /* ==== set image background color ==== */ if (Math.abs(this.w1 - this.w0) > 1) { var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt)); this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')'); } if (this == diap.V) { /* ==== on mouseover: fade in ==== */ if (this.V < 100) this.img.setOpacity(this.V += 5); } else { /* ==== fade out ==== */ if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2); } } /* ==== text effect ==== */ if (this.T) this.dispLabel(); } /* ==== display text function (typewriter FX) ==== */ s.dispLabel = function() { if (diap.G || diap.S == this) { /* ==== zoomed image ==== */ this.T.style.left = px(this.x0); this.T.style.top = px(this.y0); this.T.style.width = px(this.w0); } else { /* ==== calculate text position ==== */ var xt = diap.S.x0 + this.w0 + diap.BR; if (this.y == diap.Y) { this.T.style.top = px(this.y0 - this.f - diap.BR); if (this.y == 0) var xt = diap.S.x0; } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0)); if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5); else this.T.style.left = px(xt); if (this != diap.V) { /* ==== text type out ==== */ this.Tp--; this.T.innerHTML = this.t.substring(0, this.Tp); if (this.Tp < 1) { diap.scr.removeChild(this.T); this.T = false; } } else { if (this.Tp < this.t.length) { /* ==== text type in ==== */ this.Tp++; this.T.innerHTML = this.t.substring(0, this.Tp); } } } } /* ==== create text function ==== */ s.createLabel = function () { this.T = document.createElement('div'); this.T.className = 'label'; if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right'; this.f = 4 + Math.round(Math.sqrt(diap.nht * 2)); if(this == diap.S) { this.f *= 2; this.T.style.background = 'none'; this.T.style.textAlign = 'center'; } this.T.style.fontSize = ''.concat(this.f, 'px'); this.T.innerHTML = this.t; this.T.style.left = px(-1000); this.T.style.width = px(diap.nwu * .5); this.T.style.height = px(this.f + 3); this.Tp = 0; diap.scr.appendChild(this.T); } /* ==== on mouse over event ==== */ s.onmouseover = function() { if (diap.S != this && diap.G != this) { /* ==== display image ==== */ this.img.setOpacity(100); this.V = this.img.setOpacity(20); } /* ==== create text ==== */ if (!this.T) this.createLabel(); diap.V = this; } /* ==== on click event ==== */ s.onclick = function() { /* ==== memorize selected image ==== */ diap.X = this.x; diap.Y = this.y; diap.V = false; diap.G = false; this.V = this.img.setOpacity(100); diap.delLabels(); if (diap.S == this) { /* ==== zoom out - grid mode on ==== */ diap.S = false; diap.G = this; for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel(); } else { /* ==== zoom in ==== */ diap.S = this; this.createLabel(); } diap.setPosition(); } s.createLabel(); s.ondblclick = s.onclick; s.ondrag = function () { return false; } k++; } } this.N = NX * NY; /* ==== add resize event ==== */ this.resize(); addEvent(window, 'resize', diap.resize); /* ==== start main loop ==== */ this.run(); } } /* ==== create diaporama ==== */ onload = function () { /* ==== container, X, T, path, [image.src, text] ==== */ diap.init("screen", 4, 4, "", [ ["http://www.songlecn.com/wp-content/supload/2009/02/21/or8.jpg", "His little voodoo was a success"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or46.jpg", "She arrived from nowhere"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or10.jpg", "as cute as she could be"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or4.jpg", "It was a night of full moon"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or16.jpg", "It didn't take him anytime to fall in love"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or9.jpg", "He had been certain of his success"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or6.jpg", "In a few days after"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or27.jpg", "All the tools were in place"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or14.jpg", "The girl left a note..."], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or30.jpg", "...saying she had left home"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or1.jpg", "揝o what抯 with the panic??"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or2.jpg", "Tears for fears"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or12.jpg", "A light in the dark"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or44.jpg", "Flashes of pain and hope"], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or39.jpg", "If only we could capture..."], ["http://www.songlecn.com/wp-content/supload/2009/02/21/or33.jpg", "...the beauty of autumn"] ]); } </script> </head> <body> <div id="screen"></div> <img id="loading" alt="" src="http://www.songlecn.com/wp-content/supload/2009/02/21/or11.jpg" style="visibility: hidden"> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
