图片展示特效代码非常不错资源-CSDN下载

共22个文件

jpg：16个

htm：5个

js：1个

图片展示特效

需积分: 10 170 浏览量 2008-04-26 22:05:03 上传评论收藏 835KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

图片展示特效.rar （22个子文件）

图片展示特效

5.jpg 66KB

index5.htm 8KB

3.jpg 68KB

8.jpg 89KB

4.jpg 26KB

12.jpg 69KB

index2.htm 6KB

9.jpg 32KB

2.jpg 47KB

10.jpg 41KB

dhteumeuleu.js 738B

1.jpg 52KB

index3.htm 9KB

11.jpg 40KB

14.jpg 62KB

6.jpg 49KB

15.jpg 45KB

index.htm 10KB

index4.htm 7KB

16.jpg 80KB

7.jpg 30KB

13.jpg 26KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>广州虚拟主机1G空间100元www.gzxnzj.cn</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #screen { position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; background: #000; color: #fff; } #screen div { position: absolute; overflow: hidden; cursor: pointer; } #screen img { position: absolute; width: 100%; height: 100%; } #screen .label { position: absolute; color: #FFF; background: #000; font-family: arial; white-space: no-wrap; } </style>  <script type="text/javascript" src="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 = p

评论收藏

内容反馈