Este artigo descreve a implementação do JS da linha horizontal de imagens com função de exibição de zoom de reflexão. Compartilhe -o para sua referência, como segue:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js implementa a imagem < http-equiv = "imageToolbar" content = "no" /> <style type = "text /css"> html {untroflow: hidden;} corpo {margin: 0px; padding: 0px; fundo: #000; largura: 100%: 100%;} #imagem: #000;}#ImageFlow .Diapo {Posição: Absolute; esquerda: -1000px; cursor: Pointer; -ms-interpolation-mode: mais próximo-neighbor;}#imageflow .link {borda: -1px;} 1px; margin-left: -1px; margin-bottom: -1px; {Posição: Absoluto; largura: 100%; altura: 2%; fundo: #003366;} #ImageFlow .Text {Posição: Absoluto; esquerda: 0px; largura: 100%; inferior: -12px; {Font-Size: 0.9em; Fonte-peso: Bold;}#ImageFlow .LEGEND {Font-Size: 0.8em;}#ImageFlow .ScrollBar {Position: Absolute; esquerda: 10%; inferior: 10%; largura: 80%; Position: 16px; Z-Index: 1000;}#Image. 16px; filtro: alpha (opacidade = 30); opacidade: 0.3;}#ImageFlow .Arrow-left {Posição: Absoluto;}#ImageFlow .Arrow-Right {Position: Absolute; direita: 0px;}#imageflow .Bar {Position: Absolute; Hight: 16px; esquerda: 25px;} </style lf = 0; var instâncias = []; function getSbyClass (objeto, tag, className) {var o = object.getElementsByTagName (tag); para (var i = 0, n = o.Length, ret = []; i <n; i ++) if (o [i] .l) nome (retname); ret [0]; return ret;} função addEvent (o, e, f) {if (window.addeventListener) o.addeventListener (e, f, false); else if (window.attachevent) r = o.tachevent ('on' + e, f);} função creameflexion (cont, img) {var) {var) {var) {var) {var) {varsg) {'e' e); (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.H.H) -1); context.Drawimage (img, 0, 0, img.width, img.Height); context.GlobalComPoteroperation = "Destination -out"; var gradient = context.createlineargradient (0, 0, 0, img.Height * 2); Gradient.addcolorstop (1 "" RGBA (255, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 0, 0, 0, 0, 0, 0, IMG.Height * 2); Gradient.addcolorstop (1 "RGBA (250 0) "); gradiente.addcolorstop (0," rgba (255, 255, 255, 1) "); context.fillstyle = gradient; context.fillrect (0, 0, img.width, img.Height * 2);} else {/ * --- dporeTransform --- */flx/ img.src; flx.style.filter = 'flipv progid: dximageTransform.microsoft.alpha (' +'opacity = 50, style = 1, finalizOpacity = 0, startx = 0, finalizx = 0, finalizy =' +(img.Height *.25) +''; 'absoluto'; flx.style.left = '-1000px'; cont.appendChild (flx); retorna flx;} função imageflow (OCONT, tamanho, zoom, borda) {this.diapos = []; this.scr = false; this.size = size. Document.getElementById (Ocont); this.ScrollBar = getElementsByClass (this.oc, 'div', 'scrollbar'); this.text = getElementsByclass (this.oc, 'div', 'text'; this.title = getElements (this.Emt.Ext, 'Div', ''); 'legend'); this.bar = getSbyclass (this.oc, 'img', 'bar'); this.arl = getElementsbyclass (this.oc, 'img', 'seta-left'); this.arr = getElementsByclass (this.oc, 'img', 'Arrow-allef'); '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; () {return false; }/ * --- Crie imagens --- */var iMg = getElementsByClass (this.oc, 'div', 'Bank'). GetElementsByTagName ('a'); this.nf = img.length; para (var i = 0, o; o = img [i]; i ++) {this.rpos [i] = new; + i + ' -', o.innerhtml || o.rel, o.href ||. {this.parent.scroll (-e.detail);}, false); caso contrário, this.oc.onMousewheel = function () {this.parent.Scroll (event.wheelDelta);}/ * ===== Scrollbar drag n soly == */this. this.offsetLeft; var self = this.parent;/ * --- mover barra --- */this.parent.oc.onMousEMove = function (e) {if (! e) e = window.event; self.bar.style.left = math.ound (math.min (self.ws - self.arw.bwwwwwww), math.s) (self.ws - e.Al), scr). 'px'; self.view = math.round (((e.creenx - scl))/(self.ws - self.alw - self.arw - self.bw) * self.nf); if (self.view! = NULL; retornar false;} retornar false;}/ * ==== Arrow direita === */this.arr.OnClick = this.arr.ondblClick = function () {if (this.parent.view <this.parent.nf - 1) this.parent.calc (this);}/ * ==============================================================================================================================> () {if (this.parent.view> 0) this.parent.calc (-1);}} imageflow.prototype = {/* ==== Targets ===*/calc: function (inc) {if (Inc) thisView += Inc; var tw = 0; var lw = 0; var o = this.diaOSSos [this) --- */var ob = this.diapos [this.back]; if (ob && ob! = o) {ob.img.classname = 'diapo'; ob.z1 = 1;}/ *--- Atualizar legenda --- */this.title.replacechild (document.createTextNode (O.Title), this.title.firstChild); this.legend.replacechild (document.createTextNode (o.text), this.legend.firstchild);/ * --- Atualizar hiperlink --- */if (o.url) {o.img.className = 'link'; {o.img.className = 'diapo'; window.status = '';}/ * --- Calcule tamanhos e posições de destino --- */o.w1 = math.min (o.iw, this.wh * .5) * o.z1; var x0 = o.x1 = (this.wh * .5)-(O.W; this.bdw; para (var i = this.view +1, o; o = this.diapos [i]; i ++) {if (o.loaded) {o.x1 = x; o.w1 = (this.ht / ou) * this.size; x += o.w1 +this.bdw; twx += o.1 +this.b; i = this.view -1, o; Mova 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 ';}/ * --- visualize -view - Mousewheel rolling === */scroll: function (sc) {if (sc <0) {if (this.view <this.nf - 1) this.calc (1);} else {if (this.view> 0) this.calc (-1);}},/ *= ===== === */ */ this.oc.clientWidth; this.ht = this.oc.clientHeight; this.ws = this.scrollbar.offsetWidth; this.Calc (); this.run (true);},/ * ==== move todas as imagens === */run: function (res) {var i = this.n; this.diapos [i] .move (res);}} diapo = function (pai, n, src, título, texto, url, destino) {this.parent = pai; this.loaded = false; this.title = title; this.text = text; this.url = url; this.target = alvo; title.n; n; this.Text = text; this.url = url; this.Target = Target; title.n; este.n; this.Text = text; this.url = Url; this.Target = alvo; 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; this.img.OnClick = function () {this.parent.Click (); } this.parent.oc.appendChild (this.img);/ * --- Exibir link externo --- */if (url) {this.img.onMouseOver = function () {this.className = 'link diapo'; } 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| ---- */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.parent.wh && this.x0 +this.w0> 0) {/ * --- pintura somente imagens visíveis --- */this.Visible = tred; var o = this.img.style; 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'; this.flx.style; o.left = Math.ound (this.x0) + 'px'; o.top = math.ceil (this.parent.ht * .75 + 1) + 'px'; o.width = math.Round (this.w0) + 'px'; »»eft = {h) --- */if (this.Visible) {this.visible = false; this.img.style.width = '0px'; if (this.flx) this.flx.style.width = '0px';}}}} {/ * ==== Image === */se imagem --- */this.iw = this.img.width; this.ih = this.img.Height; this.r = this.ih/this.iw; this.loaded = true;/ *--- Crie reflexion --- */this.flx = Createrflexion (this.parent.oc, this.img) se (this.Parent.Par.Par.Pereflexion (este.Parent.OC) this.n; this.Parent.Calc ();}}},/ * ==== Diapo OnClick ==== */Clique: function () {if (this.parent.view == this.n) {/ *--Open em diapa zoom --- */if (/this.url) {/--- this.target);} else {/ * --- Zoom in/out --- */this.z1 = this.z1 == 1? this.parent.Zoom: 1; this.parent.Calc ();}} else {/* --- Selecione Diapo ---*/this.parent.view = this.n; this.parent.Calc ();} retornar false;}} retornar {/* ==== REMINIZE SCRIPT ===/*/Crike: function;}} {/* ===== */var load = function () {var carregado = false; var i = instâncias.Length; while (i-) if (instâncias [i] .ocont == div) carregado = true; if (! carregado) {/ *--- empurre o novo fluxo de imagem --- */instâncias. {imf.initialized = true;/ * --- redimensionar o evento --- */addEvent (janela, 'redimensionar', function () {var i = instâncias.length; while (i-) instâncias [i] .Resize ();});/ * --- Stop Not Napot --- */addEvent (document.); Window.Event; var Tg = E.RelatedTarget || e.toElement; if (tg && tg.tagname == 'html') {var i = instâncias.Length; while (i--) instâncias [i] .oC.OnMouSove = null;} Return;}); instâncias.Length; While (i--) instâncias [i] .run ();}, 16);}}}/ * --- Evento de Onload da janela --- */addEvent (Window, 'load', function () {load ();});}}} (); // div, tamanho, zoom, borda de borda (}); 10); </script> </ad> <body> <div id = "imageflow"> <div> </div> <div> <a rel = "Images/1.jpg" href = "#" _fcksavedurl = "#"> reprodução de design 3D </a> <a = "imagens/2.jpg"> renderização </a> <a rel = "Images/3.jpg" href = "#" _fcksavedurl = "#"> renderização de design 3D interno </a> <a rel = "Images/4.jpg" href = "#" _fcksAVedUrl = "#"> INOOR 3D Design Randing <AnA " _fckksAvedUrl = "#"> Renderização de design 3D interno </a> <a rel = "imagens/6.jpg" href = "#" _fcksavedurl = "#"> rendering 3d de design </a> <a rel = "imagens/1.jpg" href = "#" _f rel = "Images/2.jpg" href = "#" _fcksavedUrl = "#"> renderização de design 3D interno </a> <a rel = "imagens/3.jpg" href = "#" _fcksavedurl = "#"> cena de design de 3D "#"#"_FCKSavedUrl ="#"> cena 3D de design 3D </a) <a rel =" _fcksavedurl = "#"> renderização de design 3D interno </a> <a rel = "imagens/5.jpg" href = "#" _fcksavedurl = "#"> renderização 3d de design </a> <a Rel = "imagens/6.jpg" href = "#" _f rel = "Images/2.jpg" href = "#" _fcksavedurl = "#"> renderização de design 3D interno </a> </div> <div> <div> carregando </div> <div> por favor, aguarde ... </div> </div> <div> <img src = "" _fcksvedurl = " _fckSavedUrl = "Images/l.jpg"> <img src = "imagens/r.jpg" _fcksavedurl = "imagens/r.jpg"> <img src = "imagens/s.png" _fcksavedurl = "imagens/s.png"> </div> </div>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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.