本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS实现显示倒影的图片横排居中放大展示特效</title><meta http-equiv="imagetoolbar" content="no" /><style type="text/css">html {overflow: hidden;}body {margin: 0px;padding: 0px;background: #000;width: 100%;height: 100%;}#imageFlow {position: absolute;width: 100%;height: 80%;left: 0%;top: 10%;background: #000;}#imageFlow .diapo {position: absolute;left: -1000px;cursor: pointer;-ms-interpolation-mode: nearest-neighbor;}#imageFlow .link {border: dotted #fff 1px;margin-left: -1px;margin-bottom: -1px;}#imageFlow .bank {visibility: hidden;}#imageFlow .top {position: absolute;width: 100%;height: 2%;background: #003366;}#imageFlow .text {position: absolute;left: 0px;width: 100%;bottom: -12px;text-align: center;color: #FFF;font-family: verdana, arial, Helvetica, sans-serif;z-index: 1000;}#imageFlow .title {font-size: 0.9em;font-weight: bold;}#imageFlow .legend {font-size: 0.8em;}#imageFlow .scrollbar {position: absolute;left: 10%;bottom: 10%;width: 80%;height: 16px;z-index: 1000;}#imageFlow .track {position: absolute;left: 0.5%;width: 98%;height: 16px;filter: alpha(opacity=30);opacity: 0.3;}#imageFlow .arrow-left {position: absolute;}#imageFlow .arrow-right {position: absolute;right: 0px;}#imageFlow .bar {position: absolute;height: 16px;left: 25px;}</style><script type="text/javascript">var imf = function () {var lf = 0;var instances = [];function getElementsByClass (object, tag, className) {var o = object.getElementsByTagName(tag);for ( var i = 0, n = o.length, ret = []; i < n; i++)if (o[i].className == className) ret.push(o[i]);if (ret.length == 1) ret = ret[0];return ret;}function addEvent (o, e, f) {if (window.addEventListener) o.addEventListener(e, f, false);else if (window.attachEvent) r = o.attachEvent('on' + e, f);}function createReflexion (cont, img) {var flx = false;if (document.createElement("canvas").getContext) {flx = document.createElement("canvas");flx.width = img.width;flx.height = img.height;var context = flx.getContext("2d");context.translate(0, img.height);context.scale(1, -1);context.drawImage(img, 0, 0, img.width, img.height);context.globalCompositeOperation = "destination-out";var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);gradient.addColorStop(1, "rgba(255, 255, 255, 0)");gradient.addColorStop(0, "rgba(255, 255, 255, 1)");context.fillStyle = gradient;context.fillRect(0, 0, img.width, img.height * 2);} else {/* ---- DXImageTransform ---- */flx = document.createElement('img');flx.src = img.src;flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +(img.height * .25) + ')';}/* ---- insert Reflexion ---- */flx.style.position = 'absolute';flx.style.left = '-1000px';cont.appendChild(flx);return flx;}function ImageFlow(oCont, size, zoom, border) {this.diapos = [];this.scr = false;this.size = size;this.zoom = zoom;this.bdw = border;this.oCont = oCont;this.oc = document.getElementById(oCont);this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');this.text = getElementsByClass(this.oc, 'div', 'text');this.title = getElementsByClass(this.text, 'div', 'title');this.legend = getElementsByClass(this.text, 'div', 'legend');this.bar = getElementsByClass(this.oc, 'img', 'bar');this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');this.bw = this.bar.width;this.alw = this.arL.width - 5;this.arw = this.arR.width - 5;this.bar.parent = this.oc.parent = this;this.arL.parent = this.arR.parent = this;this.view = this.back = -1;this.resize();this.oc.onselectstart = function () { return false; }/* ---- create images ---- */var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');this.NF = img.length;for (var i = 0, o; o = img[i]; i++) {this.diapos[i] = new Diapo(this, i,o.rel,o.title || '- ' + i + ' -',o.innerHTML || o.rel,o.href || '',o.target || '_self');}/* ==== add mouse wheel events ==== */if (window.addEventListener)this.oc.addEventListener('DOMMouseScroll', function(e) {this.parent.scroll(-e.detail);}, false);else this.oc.onmousewheel = function () {this.parent.scroll(event.wheelDelta);}/* ==== scrollbar drag N drop ==== */this.bar.onmousedown = function (e) {if (!e) e = window.event;var scl = e.screenX - this.offsetLeft;var self = this.parent;/* ---- move bar ---- */this.parent.oc.onmousemove = function (e) {if (!e) e = window.event;self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);if (self.view != self.back) self.calc();return false;}/* ---- release scrollbar ---- */this.parent.oc.onmouseup = function (e) {self.oc.onmousemove = null;return false;}return false;}/* ==== right arrow ==== */this.arR.onclick = this.arR.ondblclick = function () {if (this.parent.view < this.parent.NF - 1)this.parent.calc(1);}/* ==== Left arrow ==== */this.arL.onclick = this.arL.ondblclick = function () {if (this.parent.view > 0)this.parent.calc(-1);}}ImageFlow.prototype = {/* ==== targets ==== */calc : function (inc) {if (inc) this.view += inc;var tw = 0;var lw = 0;var o = this.diapos[this.view];if (o && o.loaded) {/* ---- reset ---- */var ob = this.diapos[this.back];if (ob && ob != o) {ob.img.className = 'diapo';ob.z1 = 1;}/* ---- update legend ---- */this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);/* ---- update hyperlink ---- */if (o.url) {o.img.className = 'diapo link';window.status = 'hyperlink: ' + o.url;} else {o.img.className = 'diapo';window.status = '';}/* ---- calculate target sizes & positions ---- */o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);var x = x0 + o.w1 + this.bdw;for (var i = this.view + 1, o; o = this.diapos[i]; i++) {if (o.loaded) {o.x1 = x;o.w1 = (this.ht / o.r) * this.size;x += o.w1 + this.bdw;tw += o.w1 + this.bdw;}}x = x0 - this.bdw;for (var i = this.view - 1, o; o = this.diapos[i]; i--) {if (o.loaded) {o.w1 = (this.ht / o.r) * this.size;o.x1 = x - o.w1;x -= o.w1 + this.bdw;tw += o.w1 + this.bdw;lw += o.w1 + this.bdw;}}/* ---- move scrollbar ---- */if (!this.scr && tw) {var r = (this.ws - this.alw - this.arw - this.bw) / tw;this.bar.style.left = Math.round(this.alw + lw * r) + 'px';}/* ---- save preview view ---- */this.back = this.view;}},/* ==== mousewheel scrolling ==== */scroll : function (sc) {if (sc < 0) {if (this.view < this.NF - 1) this.calc(1);} else {if (this.view > 0) this.calc(-1);}},/* ==== resize ==== */resize : function () {this.wh = this.oc.clientWidth;this.ht = this.oc.clientHeight;this.ws = this.scrollbar.offsetWidth;this.calc();this.run(true);},/* ==== move all images ==== */run : function (res) {var i = this.NF;while (i--) this.diapos[i].move(res);}}Diapo = function (parent, N, src, title, text, url, target) {this.parent = parent;this.loaded = false;this.title = title;this.text = text;this.url = url;this.target = target;this.N = N;this.img = document.createElement('img');this.img.src = src;this.img.parent = this;this.img.className = 'diapo';this.x0 = this.parent.oc.clientWidth;this.x1 = this.x0;this.w0 = 0;this.w1 = 0;this.z1 = 1;this.img.parent = this;this.img.onclick = function() { this.parent.click(); }this.parent.oc.appendChild(this.img);/* ---- display external link ---- */if (url) {this.img.onmouseover = function () { this.className = 'diapo link'; }this.img.onmouseout = function () { this.className = 'diapo'; }}}Diapo.prototype = {/* ==== HTML rendering ==== */move : function (res) {if (this.loaded) {var sx = this.x1 - this.x0;var sw = this.w1 - this.w0;if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {/* ---- paint only when moving ---- */this.x0 += sx * .1;this.w0 += sw * .1;if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {/* ---- paint only visible images ---- */this.visible = true;var o = this.img.style;var h = this.w0 * this.r;/* ---- diapo ---- */o.left = Math.round(this.x0) + 'px';o.bottom = Math.floor(this.parent.ht * .25) + 'px';o.width = Math.round(this.w0) + 'px';o.height = Math.round(h) + 'px';/* ---- reflexion ---- */if (this.flx) {var o = this.flx.style;o.left = Math.round(this.x0) + 'px';o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';o.width = Math.round(this.w0) + 'px';o.height = Math.round(h) + 'px';}} else {/* ---- disable invisible images ---- */if (this.visible) {this.visible = false;this.img.style.width = '0px';if (this.flx) this.flx.style.width = '0px';}}}} else {/* ==== image onload ==== */if (this.img.complete && this.img.width) {/* ---- get size image ---- */this.iw = this.img.width;this.ih = this.img.height;this.r = this.ih / this.iw;this.loaded = true;/* ---- create reflexion ---- */this.flx = createReflexion(this.parent.oc, this.img);if (this.parent.view < 0) this.parent.view = this.N;this.parent.calc();}}},/* ==== diapo onclick ==== */click : function () {if (this.parent.view == this.N) {/* ---- click on zoomed diapo ---- */if (this.url) {/* ---- open hyperlink ---- */window.open(this.url, this.target);} else {/* ---- zoom in/out ---- */this.z1 = this.z1 == 1 ? this.parent.zoom : 1;this.parent.calc();}} else {/* ---- select diapo ---- */this.parent.view = this.N;this.parent.calc();}return false;}}return {/* ==== initialize script ==== */create : function (div, size, zoom, border) {/* ---- instanciate imageFlow ---- */var load = function () {var loaded = false;var i = instances.length;while (i--) if (instances[i].oCont == div) loaded = true;if (!loaded) {/* ---- push new imageFlow instance ---- */instances.push(new ImageFlow(div, size, zoom, border));/* ---- init script (once) ---- */if (!imf.initialized) {imf.initialized = true;/* ---- window resize event ---- */addEvent(window, 'resize', function () {var i = instances.length;while (i--) instances[i].resize();});/* ---- stop drag N drop ---- */addEvent(document.getElementById(div), 'mouseout', function (e) {if (!e) e = window.event;var tg = e.relatedTarget || e.toElement;if (tg && tg.tagName == 'HTML') {var i = instances.length;while (i--) instances[i].oc.onmousemove = null;}return false;});/* ---- set interval loop ---- */setInterval(function () {var i = instances.length;while (i--) instances[i].run();}, 16);}}}/* ---- window onload event ---- */addEvent(window, 'load', function () { load(); });}}}();// div ID , size, zoom, borderimf.create("imageFlow", 0.15, 1.5, 10);</script></head><body><div id="imageFlow"><div class="top"></div><div class="bank"><a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/3.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/4.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/5.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/6.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/3.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/4.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/5.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/6.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a><a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a></div><div class="text"><div class="title">Loading</div><div class="legend">Please wait...</div></div><div class="scrollbar"><img class="track" src="" _fcksavedurl="" alt=""><img class="arrow-left" src="images/l.jpg" _fcksavedurl="images/l.jpg" alt=""><img class="arrow-right" src="images/r.jpg" _fcksavedurl="images/r.jpg" alt=""><img class="bar" src="images/s.png" _fcksavedurl="images/s.png" alt=""> </div></div></body></html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
新闻热点
疑难解答
