Cet article décrit la mise en œuvre JS de la ligne horizontale d'images avec la fonction d'affichage du zoom de réflexion. Partagez-le pour votre référence, comme suit:
<! 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"> <éad- head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> jS implémente l'image montrant les réflexions vers le centre et le zoom dans et affiche les effets spéciaux </ title> <méta http-equiv = "ImageToolbar" contenu = "no" /> <style type = "text / css"> html {overflow: caché;} corps {margin: 0px; padding: 0px; fond: # 000; width: 100%; hauteur: 100%;} # # ImageFlow: Position: Absolue; width: 100%; hauteur: 80%; laisse; 10%; arrière-plan: # 000;} # ImageFlow .diapo {position: absolu; gauche: -1000px; curseur: pointeur; -ms-interpolation-mode: le plus proche-neighbor;} # ImageFlow .Link {border: en pointillé #FFF 1PX; margin-left: -1px; margin-bottom: -1px;} # # # ImageFlow {Visibilité: MARGIN-BOTTOM: -1px;} # # ImageFlow {Visibilité: MARGIN-BOTTOM: -1px;} # # ImageFlow. Hidden;} # ImageFlow .top {position: absolue; largeur: 100%; hauteur: 2%; arrière-plan: # 003366;} # ImageFlow .Text {Position: Absolute; Left: 0px; Width: 100%; en bas: -12px; Text-Align: Center; Color: #fff; Font-Family: Verdana, Arrial, Helvetica, Sans-tereft; 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%; Hight: 16px; z-indice: 1000;} # ImmageFlow. Absolute; gauche: 0,5%; largeur: 98%; hauteur: 16px; filtre: alpha (opacité = 30); opacité: 0,3;} # ImageFlow .Arrow-left {position: absolue;} # imageflow .Arrow-right: Absolute; Absolut; Hight: 0px;} # imageflow .bar {Position: Absolute; Height: 16px; gauche: gauche: gauche: gauche. 25px;} </ style> <script type = "text / javascript"> var imf = function () {var lf = 0; var instances = []; function getElelementsBlass (objet, tag, className) {var o = object.getElementsByTagName (tag); for (var i = 0, n = o.Lentend, ret = []; i <n; i ++) if (o [i]. == classname) ret.push (o [i]); if (ret.length == 1) ret = ret [0]; return ret;} function addevevent (o, e, f) {if (window.addeventListener) o.addeventlitener (e, f, false); else if (window.attachevent) r = o.atchevent (' 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); -1 " 0) "); gradient.addColOrStop (0," rgba (255, 255, 255, 1) "); context.fillStyle = gradient; context.fillrect (0, 0, img.width, img.height * 2);} else {/ * --- dxiagetransform --- * fx = document.createelement ('iMg'); Flx. img.src; flx.style.filter = 'flipv PROGID: dxiageTransform.microsoft.alpha (' + 'opacity = 50, style = 1, finaloPacity = 0, startx = 0, finidX = 0, finaly =' + (img.height * .25) + ')';} / * --- Insert Reflexion - * / flx.style. 'Absolute'; flx.style.left = '-1000px'; cont.appendChild (flx); return flx;} fonction imageflow (oont, size, zoom, border) {this.diapos = []; this.scr = false; this.size = size; this.coom = zoom; this.bdw = border; this.ocont = ocont = ocont; this.oc = zoo Document.getElementById (OCONT); this.scrollbar = getElementsByClass (this.oc, 'div', 'Scrollbar'); this.text = getElementsByClass (this.oc, 'div', 'text'); this.titleyClassyClass (this.text, 'div', 'title'); this.legend = getElelementyClass (that.Text, ','); this.lengend 'légende'); this.bar = getElementsByClass (this.oc, 'img', 'bar'); this.arl = getElementsByClass (this.oc, 'img', 'arrow-left'); this.arr = getElementsByClass (this.oc, 'img', 'arrow-left'); '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 = this. {return false; } / * --- Créer des 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. + i + '-', o.innerhtml || o.rel, o.href || {this.parent.scroll (-e.detail);}, false); else this.oc.onmousewheel = function () {this.parent.scroll (event.wheeldelta);} / * ==== Scrollbar glisser n drop === * / this.bar.onmousedown = function (e) {if (! this.offsetleft; var self = this.parent; / * --- bouger bar --- * / this.parent.oc.onmoumove = function (e) {if (! e) e = window.event; self.bar.style.left = math.round (math.min ((self.ws - self.arw - sof.bw), math.max (self.alw, e.creenx - sof.bw), math.max '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.occ.onMouseUp = function (e) {self.oc.onMouseMove = null; return false;} return false;} / * ==== arrow droit === * / this.arr.onclick = this.arr.ondblick = function () {if (this.parent.view <this.parent.nf - 1) this.parent.calc (1);} / * ==== Arow this.arl.ondblclick = function () {if (this.parent.view> 0) this.parent.calc (-1);}} imageflow.prototype = {/ * ==== cibles === * / calc: function (inc) {if (inc) this.view + = inc; var tw = 0; var lw = 0; O.Loaded) {/ * --- reset --- * / var ob = this.diapos [this.back]; if (ob && ob! = o) {ob.img.classname = 'diapo'; ob.z1 = 1;} / * --- mettant à jour légende - * / this.title.replaceChild (document.createTextNode (o.Title), this.title.firstchild); this.legend.replacechild (document.createTextNode (o.text), this.legend.firstchild); / * --- met à jour hyperlink --- * / if (o.url) {o.img.classname = 'diapo link; gens this.bdw; for (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; tw + = o.w1 + this.bdw; i = this.view - 1, o; o = this.diapos [i]; i--) {if (o.loaded) {o.w1 = (this.ht / ou) * this.size; o.x1 = x - o.w1; x - = o.w1 + Déplacer 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';} / * --- Enregistrer la vue de prévision --- * / 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);}, / * ==== déplacer toutes les images ==== * / run: function (res) {var i = this.nf; while (i-) this.diapos [i] .move (res);}} diapo = fonction (parent, n, src, title, texte, url, cible) {this.parent = parent; this.loaded = false; this.title = title; this.text = text; this.url = url; this.target = cible; 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; this.img.onclick = function () {this.parent.click (); } this.parent.oc.appendChild (this.img); / * --- Afficher le lien externe --- * / if (url) {this.img.onmouseOver = function () {this.classname = 'diapo link'; } this.img.onmouseout = function () {this.classname = 'diapo'; }}} Diapo.prototype = {/ * ==== Html rendu ==== * / 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 | traite) --- * / this.x0 + = sx * .1; this.w0 + = sw * .1; if (this.x0 <this.parent.wh && this.x0 + this.w0> 0) {/ * --- peindre uniquement les images 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'; / * --- réflexion --- * / if (this.flx) {vaw 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'; --- * / 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.imgletet && this.Img.width) {/ * - Get Image.ImgPlete && this.img.width) {/ * - Get Image.ImgPlete && this.img.width) {/ * - Get Image.ImgPlete && This.Img.width) {/ * - Get Image.ImgPlete && this.Img.width) {/ * - Get Image.ImgPlete && this.img.width) {/ * - Get Image. --- * / this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih / this.iw; this.loaded = true; / * --- créer une réflexion --- * / this.flx = createflexion (this.parent.oc, this.img); if (this.parent.view <0) this.parent.view = this.n; this.parent.calc ();}}}, / * ==== Diapo onClick ==== * / cliquez: fonction () {if (this.parent.view == this.n) {/ * --- cliquez sur Zoom Diapo --- * / if (this.url) {/ * --- Open HyperLink --- * / window 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 scrip * / var charge = fonction () {var chargé = false; var i = instances.length; while (i--) if (instances [i] .ocont == div) chargé = true; if (! chargé) {/ * --- push new ImageFlow instance {imf.initialized = true; / * --- Window Redize Event --- * / AddEvent (Window, 'redimensi', function () {var i = instances.length; while (i--) instances [i] .resize ();}); / * --- stop glisser n drop --- * / addEvent (document.getementyid (div), 'souris 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 interne instances.length; while (i--) instances [i] .run ();}, 16);}}} / * --- window onload event --- * / addEvent (window, 'Load', function () {losh ();});}}} (); // div id, size, zoom, borderImf.create ("imageflow", 0,15, 1.5, 1 10). rendu </a> <a rel = "images / 3.jpg" href = "#" _fcksavedUrl = "#"> Rendu de conception 3D intérieure </a> <a rel = "images / 4.jpg" href = "#" _fcksavedUrl = "#"> INDOOR 3D Design Rendering </a> <a Rel = "Images / 5.jp" href = "#" # "#" # # " _fcksavedurl="#">Indoor 3D design rendering</a><a rel="images/6.jpg" href="#" _fcksavedurl="#">Indoor 3D design rendering</a><a rel="images/1.jpg" href="#" _fcksavedurl="#">Indoor 3D design rendering</a><a rel = "images / 2.jpg" href = "#" _fcksavedUrl = "#"> rendu de conception 3D en intérieur </a> <a rel = "images / 3.jpg" href = "#" _fcksavedUrl = "#"> Indoor 3D Design Rendering </a> <a rel = "images / 4.jpg" href = "#" " _fcksavedUrl = "#"> Rendu de conception 3D intérieure </a> <a rel = "images / 5.jpg" href = "#" _fcksavedUrl = "#"> Rendu de design 3D intérieur </a> <a rel = "Images / 6.jpg" href = "#" _fcksavedUrl = "# #"> Indoor 3d Design Rendering <a_fckSavedUrl = "#"> Indoor 3D Rendering </fckSavedUrl = "#"> Indoor 3D Rendering <"<a a amedUrl =" # "> Indoor 3d Design Rendering <A_ A aér rel = "images / 2.jpg" href = "#" _fcksavedUrl = "#"> rendu de conception 3D en intérieur </a> </div> <div> <div> Chargement </v> <v> s'il vous plaît patiner ... </div> </div> <div> <img src = "" "_fcksaveDurl =" "> <img src =" Images / l.jpg " _fcksavedUrl = "images / l.jpg"> <img src = "images / r.jpg" _fcksavedUrl = "images / r.jpg"> <img src = "images / s.png" _fcksavedUrl = "images / s.png"> </ div> </v> </ body> </ html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.