Este artículo describe la implementación JS de la fila horizontal de imágenes con la función de visualización de zoom de reflexión. Compártelo para su referencia, como sigue:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js implementa la imagen que muestra reflexiones a los centros y zoom y muestra los efectos especiales </título> <meta http-equiv = "imagetoolbar" content = "no" /> <style type = "text /css"> html {overflow: hidden;} body {margin: 0px; padding: 0px; fondo: #000; ancho: 100%; altura: 100%;} #Imageflow {Position: Absolute; Width: 100%; altura; 80%; 10%; fondo:#000;}#ImageFlow .diapo {posición: absoluto; izquierda: -1000px; cursor: pointer; -ms-interpolation-mode: más cercano-neighbor;}#imageflow .link {border: dotted #fff 1px; margin-left: -1px; margin-bottom: -1px;}#image #bank. oculto;} #imageflow .top {posición: absoluto; ancho: 100%; altura: 2%; fondo: #0033366;} #imageflow .text {posición: absoluto; izquierda: 0px; ancho: 100%; abajo: -12px; text-align: centro; color: #fff; font-smily: verdana, arial, helvetic, Helvet sans-serif; z-index: 1000;}#imageflow .title {font-size: 0.9em; font-weight: bold;}#imageflow .legend {font-size: 0.8em;}#imageflow .scrollbar {posición: absoluto; izquierda: 10%; fondo: 10%; width: 80%; altura; 16px; 1000;}#ImageFlow .Track {Position: Absolute; Izquierda: 0.5%; ancho: 98%; altura: 16px; filtro: alfa (opacidad = 30); opacidad: 0.3;}#imageflow .arw-left {posición: absoluta;}#image. 16px; izquierda: 25px;} </style> <script type = "text/javaScript"> var imf = function () {var lf = 0; var instancias = []; function getElementsByClass (object, tag, className) {var o = object.getElementSbyTagName (tag); para (var i = 0, n = o.length, ret = [[]; i <n; i++) (o [i] .classname == classname) ret.push (o [i]); if (ret.length == 1) ret = retr [0]; return ret;} function addEvent (o, e, f) {if (window.adDeventListener) o.addeventListener (e, f, falso); más if (window.attachevent) r = o.attachevent (it it it one, it it it, it it, o.attache. 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 = context. flx.getContext ("2d"); context.translate (0, img.height); context.scale (1, -1); context.drawimage (img, 0, 0, img.width, img.height); context.globalCompossiteOperation = "Destino -out"; Var Gradiente = context.CreatElineArgreMegRient (0, 0, 0, IMG.HETHE * * 2); gradiente.addColorStop (1, "rgba (255, 255, 255, 0)"); gradiente.addcolorStop (0, "rgba (255, 255, 255, 1)"); context.fillStyle = gradiente; context.fillrect (0, 0, img.width, img.height * 2);} DximageTransform --- */flx = document.createElement ('img'); flx.src = img.src; flx.style.filter = 'flipv progid: dximagetransform.microsoft.alpha (' +'opacidad = 50, estilo = 1, finkopacity = 0, startx = 0, finkx = 0, finky =' +(IMg.Height. *.25) + ')';}/ *--- Insertar reflexión --- */flx.style.position = 'absoluto'; flx.style.left = '-1000px'; cont.appendChild (flx); return flx;} function imageflow (ocont, size, zoom, borde) {this.diaPos = []; this.scRcRcRCRCR = falso; 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, ',', ',', ',', ',', ','. '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', '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 this; this.view = this.back = -1; this.resize (); this.oc.onselectstart = function () {return false; }/ * --- Crear imágenes --- */var img = getElementsByClass (this.oc, 'div', 'bank'). + i + ' -', o.innerhtml || {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 (if (if) e = window this.OffSetleft; var self = this.Parent;/ * --- Move Bar --- */this.parent.oc.onmouseMove = function (e) {if (! e) e = window.event; self.bar.style.left = math.eNT (MATH.min ((self.ws - self.arw - self.bw), math.max (self.alw, e.alw, e.min) '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;}/ * --- Libere Scrollbar --- */this.parent.oc.onmouseUp = FUNTY (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);}/ * ======== = 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 lw; var o = this.diapos (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.CreateteTetextNode (o.title) this.title.firstchild); this.legend.replaceChild (document.createTextNode (o.text), this.legend.firstchild);/ * --- update hyperLink --- */if (o.url) {o.img.classname = 'piapo link'; window.status = 'hyperlink:' + +}} classnam {o.img.classname = 'diapo'; window.status = '' ';}/ * --- Calcule los tamaños y posiciones de destino --- */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 +w1 = (este.5) 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) * this.size; x += o.w1 +this.bdw; tw += o.w1 +this.bdw;}} x (var i = this.view -1, o; o = this.diapos [i]; i--) {if (o.loaded) {o.w1 = (this.ht / o) * this.size; o.x1 = x -o.w1; x -= o.w1 + this.bdw; tw + = o.w1 + this.bdw; lw + = o.w1 +w1 + this.bdw;}}/ * --- mude 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 view ---- */ */ */this. = = lw * r) + 'px';}/ * ---- save view --- */ */this. = = 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);},/ * ==== {this.wh = this.oc.clientwidth; this.ht = this.oc.clientHeight; this.ws = this.scrollbar.offsetwidth; this.calc (); this.run (true);},/ * === MOVE todas las imágenes ==== */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 = 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 ;img.arent = this; this.img.onclick = function () {this.parent.click (); } this.parent.oc.appendChild (this.img);/ * --- Mostrar enlace externo --- */if (url) {this.img.onmouseover = function () {this.classname = 'diapo link'; } this.img.onmouseOut = function () {this.classname = 'diapo'; }}} Diapo.prototype = {/* ==== html rendering =====*/mude: 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) {/* --- */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.parent.wh && this.x0 +this.w0> 0) {/ * --- pinta solo imágenes visibles --- */this.visible = true; var o = this.img.style; var h = this.w0 * this.r;/ * ---- diapO ---- * 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 (este.flx) { 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.comg.comg.complete && this.Img.width) --- */this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih/this.iw; this.loaded = true;/ *--- create reflexión --- */this.flx = CreateReflexion (this.Parent.oc, this.img); if (this.parent.view <0) this.Parent.view.view. this.n; this.parent.calc ();}}},/ * ==== Diapo onClick ===== */click: function () {if (this.parent.view == this.n) {/ * --- Haga clic en Diapo zoomed Diapo --- */if (this.url) {/ * --- Abierto --- */ */Ventana. this.target);} else {/ * --- zoom en/out --- */this.z1 = this.z1 == 1? this.parent.zoom: 1; this.parent.calc ();}} else {/* --- Seleccionar diapo ---*/this.parent.view = this.n; this.parent.calc ();} return false;}} return {/* ==== Inicialize script =====*/create: function (divivir, tamaño, zoom, border) {/*----INTATFLIOW--INSTATIEM */var Load = function () {var Loaded = false; var i = instances.length; while (i--) if (instances [i] .oCont == div) carged = true; if (! Loaded) {/ *--- Puse la nueva instancia de ImageFlow --- */instances.push (nueva imagen (div, size, zoom, border));/ *--------- */if (IMF.InIdInEntEd) {imf.initialized = true;/ * --- Evento de cambio de tamaño de la ventana --- */addEvent (ventana, 'en torno a', function () {var i = instances.length; while (i--) instancias [i] .resize ();});/ * --- detener n drop --- */addevent (document.getElementBy (div), 'mouseout', function (e) if () Window.event; var tg = e.relatedTarget || instancias.length; while (i--) instancias [i] .run ();}, 16);}}}/ * --- Evento de Onload de ventana --- */addevent (ventana, 'load', function () {load ();});}}} (); // Div id, tamaño, zoom, borderimf.create ("imageflow", 0.15, 1.5, 1.5, 10); </script> </head> <body> <div id = "ImageFlow"> <Viv> </div> <div> <a rel = "imágenes/1.jpg" href = "#" _fcksavedurl = "#"> Interior 3D Design Reproduction </a> <a rel = "Images/2.jpg" href = "#" _fcksavedurl = "#"#"#"#"#"#"#"#"" representación </a> <a rel = "imágenes/3.jpg" href = "#" _fcksavedurl = "#"> Interior 3D Design Rendering </a> <a rel = "images/4.jpg" href = "#" _fcksavedurl = "#"> Interior 3D Design Rendering </a> <a Rel = "Images/5.J.E.jpg" Href = "#" _fcksavedUrl = "#"> Renderizado de diseño 3D en interiores </a> <a rel = "imágenes/6.jpg" href = "#" _fcksavedurl = "#"> Indoor 3d Design Rendering </a> <a rel = "Images/1.jpg" href = "#" _fcksavedurl = "#"#"#"#"#"#"#"#"#"#" rel = "imágenes/2.jpg" href = "#" _fcksavedurl = "#"> Representación de diseño 3D en interiores </a> <a rel = "imágenes/3.jpg" href = "#" _fcksavedurl = "#"> Introor 3D Diseño Rendering </aa> <A rel = "fr. _fcksavedUrl = "#"> Representación de diseño 3D en interiores </a> <a rel = "imágenes/5.jpg" href = "#" _fcksavedurl = "#"> Rendering de diseño en interno 3D </a> <a rel = "imágenes/6.jpg" href = "#" _fcksavedurl = "#"#"#"#"#"#"#"#"#"#"#" rel = "imágenes/2.jpg" href = "#" _fcksavedurl = "#"> Renderización de diseño 3D en interiores </a> </div> <div> <div> cargando </div> <div> por favor espere ... </div> </shiv> <div> <img src = "" _fcksavedurl = ">"> <img sg sic. _fcksavedurl = "Images/l.jpg"> <img src = "Images/r.jpg" _fcksavedurl = "Images/r.jpg"> <img src = "Images/s.png" _fcksavedurl = "Images/s.png"> </div> </iv> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.