Dieser Artikel beschreibt die JS -Implementierung der horizontalen Zeile von Bildern mit Reflexions -Zoom -Anzeigefunktion. Teilen Sie es für Ihre Referenz wie folgt weiter:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; Charset = utf-8"/> <titel> JS Implements Das Bild zeigt die Reflektionen und zeigte die Spezialeffekte und zeigte die Spezialeffekte und zeigte die Spezialeffekte und zeigte die Spezialeffekte und zeigte die Spezialeffekte und zeigte die Spezialeffekte und zeitete die Spezialeffekte und zeigte die Spezialeffekte und zeitete die Spezialeffekte und Zoom in Zentrum und Zoom und Zoom in Zentrum und Zoom in Zentrum und Zoom in den Zentrum und Zoom in den http-äquiv = "ImagetoolBar" content = "no" /> <style type = "text /css"> html {Überlauf: versteckt;} Körper {Margin: 0px; Padding: 0px; Hintergrund: #000; Breite: 100%; 10%; Hintergrund:#000;}#ImageFlow .Diapo {Position: Absolute; links: -1000px; Cursor: Pointer; -ms-Interpolationsmodus: Nächstes-Nachbar;}#ImageFlow .Link {Border: Dotted #fff 1px; versteckt;} #ImageFlow .top {Position: absolut; Breite: 100%; Höhe: 2%; Hintergrund: #003366;} #ImageFlow .Text {Position: absolut; links: 0px; Breite: 100%; unten: -12px; textalign: color: #Fff; sans-serif; z-Index: 1000;}#ImageFlow .title {Schriftgröße: 0,9EM; Schriftgewicht: BOLD;}#ImageFlow .Legend {Schriftgröße: 0,8EM;}#ImageFlow .ScrollBar {Position: absolut; links: 10%; .Track {Position: absolut; links: 0,5%; Breite: 98%; Höhe: 16px; Filter: Alpha (Opazität = 30); Opazität: 0,3;}#ImageFlow .Arrow-links {Position: Absolute;}#ImageFlow .Arrow-Light {Position: Absolut; rechts: 0px;}#ImageFlow. 25px;} </style> <script type = "text/javaScript"> var imf = function () {var lf = 0; var Instances = []; == className) ret.push (o [i]); if (ret.length == 1) ret = ret [0]; ret Ret;} Funktion addEvent (o, e, f) {if (fenster.addeventListener) o.addeventListener (e, file); else ite (attachvent) r = otachvent (’auf}, f)} ash) r = otachvent ('auf’, f)},} r = otachvent (’auf, f) + E, f)}} r = otachvent (ain auf . 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); 255, 255, 0). document.createelement ('img'); flx.src = img.src; flx.style.filter = 'flipv progid: dimaTransform.microsoft.Alpha (' +'opacity = 50, style = 1, findeopacity = 0, startx = 0, finishx = 0,} =} = Reflexion einfügen --- */flx.style.position = 'absolut'; flx.style.left = '-1000px'; cont.Appendchild (flx); return flx;} Funktionsbildflow (OCONT, Größe, Zoom, Border) {thiaPos; Border; this.ocont = ocont; this.oc = document.getElementById (ocont); this.scrollBar = getElements byclass (this.oc, 'div', 'scrollbar'); GetElementsByClass (this.text, 'div', 'legend'); this.bar = GetElementsByClass (this.oc, 'img', 'bar'); GetElementsByClass (this.oc, 'img', 'arrow -right'); this.bw = this.bar.width; this.alw = this.arl.width - 5; -1; this.Resize (); this.oc.onSelectStart = function () {return false; }/ * --- erstellen Bilder --- */var img = getElements byclass (this.oc, 'div', 'bank'). + i + ' -', O.innerhtml || O.Rel, O.href ||. {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;/ * --- Bewegungsleiste --- */this.parent.oc.onmousemove = Funktion (e) {if (! e) e = window.event; self.bar.style.left = math.round (math.min (self.ws - self.arw)), math.max (self. '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 (); {self.oc.onmousemove = null; return false;} return false;}/ * ==== rechter Pfeil === */this.arr.onclick = this.arr.ondblcick = function () {if (this 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 = {/ * ==== Ziele ==== */calc: function (inc) {if (Inc). (o && o.Lode) {/ * --- reset --- */var ob = this.diapos [this.back]; if (ob && ob! this.title.firstchild); this.legend.replacechild (document.createTextNode (o.Text), this.legend.firstchild);/ * --- Update hyperlink- */if (o.url) {o.img.classname = 'dipo link'; {o.img.className = ' this.bdw; für (var i = this.view +1, o; o = this.diapos [i]; i ++) {if (o.Lode) {o.x1 = x; o.w1 = (tht.ht / oder) * this.size; x += o.w1 +this.bdw; (var i = this.view -1, o; o = this.diapos [i]; i--) {if (o.Lode) {o.w1 = (this.ht / oder) * this.size; o.x1 = x -o.w1; x -= o.w1 + this.bdw; tW + = o.w1 + this.bdw; this.bdw;}}/ * --- move scrollbar --- Diese. {this.wh = this.oc.clientwidth; this.ht = this.oc.clientHeight; this.ws = this.scrollBar.Offsetwidth; this.calc (); this.diapos [i] .move (res);}} diapo = function (übergeordnet, n, src, title, text, url, Ziel) {this.parent = übergeordnet; this.Loded = false; title = title; title; document.createelement ('img'); this.img.src = src; this.img.parent = this; this.img.className = ' this; this.img.onclick = function () {this.parent.click (); } this.parent.oc.appendChild (this.img);/ * --- Zeigen externer Link --- */if (url) {this.img.onmouseover = function () {this.className = 'diapo link'; } this.img.onmouseout = function () {this.className = 'diapo'; }}} --- */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.Parent.wh && this.x0 +this.w0> 0) {/ * --- nur sichtbare Bilder --- */this.visible = true; var o = this.img.style; var h = this.w0 * this.w0 Math.round (this.x0) + 'px'; o.bottom = math.floor (this.parent.ht * .25) + 'px'; this.flx.style; o.left = math.round (this.x0) + 'px'; --- */if (this.visible) {this.visible = false; this.img.style.width = '0px'; if (this.flx) this.flx.style.width = '0px';}}} else {/ * ========== */if (this.img.comPletee && this.img.Img.Img. --- */this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih/this.iw; this.n; this.parent.calc ();}}},/ * ==== diapo onclick ===== */click: function () {if (this.parent.view == this.n) {/ * --- Klicken Sie auf Zoomed Diapo --- */it (this.urlol) {/{/ *------------------, 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; */var load = function () {var geladen = false; var i = Instances.length; while (i--) if (Instanzen [i] .ocont == dived = true; if (! geladen) {/ *--- pushen neuer Bildflow-Instanz --- {iMf.initialized = true;/ * --- Fenster-Größen-Ereignis --- */addEvent (Fenster, 'Größe', function () {var i = Instances.Length; while (i--) Instanzen [i] .Resize ();});/ * ----- Stop Drag n drop- */addEvent (Dokument (documentBy. window.event; var tg = E. 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></div><div><a rel="images/1.jpg" href="#" _fcksavedurl="#">Interior 3D Design Reproduction</a><a rel="images/2.jpg" href="#" _fcksavedurl="#">Indoor 3D design Rendering </a> <a rel = "bilder/3.jpg" href = "#" _fckksvedurl = "#"> Indoor 3D -Design Rendering </a> <a rel = "Bilder/4.JPG" href = "#" _fcksavedurl = "#"> Indoor 3D -Design Rendering </a> <A. _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 = "bilder/2.jpg" href = "#" _fcksvedurl = "#"> Indoor 3D -Design -Rendering </a> <a rel = "Bilder/3.JPG" href = "#" _fcKsvedurl = "#"> Indoor 3D -Design Rendering </a> <a rel _fcksvedurl = "#"> Indoor 3D -Design -Rendering </a> <a rel = "bilder/5.jpg" href = "#" _fcksvedurl = "#"> Indoor 3D -Design Rendering </a> <a rel = "Images/6.jpg" href = "#fcKsArl ="#"#" #fcKsave rel="images/2.jpg" href="#" _fcksavedurl="#">Indoor 3D design rendering</a></div><div><div>Loading</div><div>Please wait...</div></div><div><img src="" _fcksavedurl=""><img src="images/l.jpg" _fcksavedurl = "Images/l.jpg"> <img src = "Bilder/r.jpg" _fcksvedurl = "Images/r.jpg"> <img src = "Bilder/S.Png" _fcksavedurl = "Images/s.png"> </div> </div> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </brodhtWeitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.