Dieser Artikel beschreibt die Methode von JS, um die lokale Erweiterung oder Reduzierung von Bildern zu erreichen. 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"/> <title> Magnifier </title> <style type = "text/CSS" Höhe: 696px; Position: absolut; Oben: 100px; Links: 250px; Schriftgröße: 0; Rand: 1px solide #000;} #img {width: 500px; Höhe: 696px;} #Browser {Grenze: 1PX Solid #000; Z-Index: 100; Position: absolut; Hintergrund:#555;}#Mag {Border: 1PX Solid#000; Überlauf: versteckt; Z-Index: 100;} </style> <script type = "text/javaScript"> Funktion geteventObject (W3CEVENT) {// Ereignisnormalisierte Funktion Return W3CEvent || window.event;} Funktion getPoInterposition (e) {// Die Funktion e = e || abrufen GetEventObject (e); var x = e.pagex || (E.ClientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pagey || (e.clienty + (document.documentElement.scrolltop || document.body.scrolltop)); return {'x': x, 'y': y};} Funktion SetOpacity (Elem, Level) {// kompatible Browser -Einstellungen für transparente Werte if (Elem.Filters) {Elem.style.filter = 'alpha (opacity =' + stufe * 100 + '); } else {Elem.Style.opacity = Level; }} Funktion CSS (Elem, Prop) {// CSS -Einstellungsfunktion kann den CSS -Wert einfach einstellen und mit transparenten Werten für (var i in prop) {if (i == 'opazität') {setopacity (elem, prop [i]); } else {Elem.Style [i] = prop [i]; }} return elem;} var Magnifier = {m: null, init: function (magni) {var m = this.m = Magni || {cont: null, // div img laden das Originalbild img: null, // skalieren mag: null, // skalieren skalieren skala: 15 // skalieren, desto größer der Wertsatz, desto größer wird die Vergrößerung, aber es werden ein Problem, dass, wenn es nicht teilbar sein kann, einige kleine weiße Kanten generiert werden. Ich weiß nicht, wie man es im Moment löst} CSS (m.img, {'Position': 'Absolute', 'Width': (M.Cont.Clientwidth * M.Scale) + 'px', // Die Breite * skalierter Wert des ursprünglichen Bildes ': (M.Cont.ClientHeight * M.Scale). 'Display': 'Keine', 'Breite': m.cont.clientwidth + 'px', //m.cont ist das Originalbild, das die gleiche Breite wie das Originalbild ist. Box befindet sich weit rechts vom Originalbild 10px 'Top': m.cont.offsettop + 'px'}) var borderWid = m.cont.GetElementsByTagName ('div') [0] .Offsetwidth - M.Cont.GetElementsByTagName ('Div') [0] .Clientwidth; // Erhalten Sie die Breite des Border CSS (M.Cont.GetElementsByTagName ('div') [0], {//m.cont.GetElementsByTagname('div') · 00] ist das Browsing -Box ':' Non ', // Einstellungen': m.cont.client -thish/m.scale -thors -bound -the -bound -the -Borderwid + 'Px', // The Width/M.Scale - Borderwid + 'Px', // The Widthth/M.Scale - Borderwid + 'Px', // The Widtth/M.Scale - Borderwid + 'Px',/die Breite der ursprünglichen variaber-/m.scale -the -Borderwid + 'px',/die Breite der ursprünglichen. der Grenze 'Höhe': M.Cont.ClientHeight /M.Scale - Borderwid + 'Px', // Der Höhe /Skalierungswert des Originalbildes - die Breite der Grenze 'Opazität': 0.5 // Transparenz}) m.img.src = m.cont.GetElementsBytagname ('img') [0] .Src; // Lassen Sie den SRC -Wert des Originalbildes dem vergrößerten Bild M.Cont.Style.cursor = 'Crosshair' geben; M.Cont.onmouseover = Magnifier.start; }, start: function (e) {if (document.all) {// Führen Sie nur unter IE aus, hauptsächlich, um die Unfähigkeit zu vermeiden, Magnifier zu überschreiben. } this.onmousemove = Magnifier.move; // Dies zeigt auf m.cont this.onmouseout = Magnifier.end; }, Bewegung: Funktion (e) {var pos = getPoInterposition (e); // Ereignisstandardisierung this.getElementsByTagName ('div') [0] .Style.display = ''; CSS (this.getElementsByTagName ('div') [0], {'top': math.min (math.max (pos.y - this.offsettop - parseInt (this.getElementsByTagName ('Div') [0] .Style.height) / 2,0). 'px', 'links': math.min (math.max (pos.x - this.offsetleft - parseInt (this.getElementsByTagname ('div') [0] .style.width) /2,0), this.clientwidth - this.getElementsByTagname ('div') [0]. this.offsetLeft - Durchsuchen von Box Width/2, Math.max und Math.min, damit die Browse -Box das Bild nicht überschreitet}) Magnifier.m.mag.Style.display = ''; CSS (Magnifier.M.img, {'top': - (parseInt (this.getElementsByTagName ('div') [0] .Style.top) * Magnifier.m.scale) + 'px', 'links': - (ParseInt (this.getElementsByname)). }, Ende: Funktion (e) {this.getElementsByTagName ('div') [0] .style.display = 'None'; Magnifier.RemoveIframe (Magnifier.m.img); // Iframe Magnifier.M.Mag.Style.Display = 'None' zerstören; }, createIframe: function (elem) {var layer = document.createelement ('iframe'); Layer.TabIndex = '-1'; Layer.src = 'JavaScript: false;'; Elem.Parentnode.AppendChild (Layer); Layer.Style.Width = Elem.Offsetwidth + 'PX'; Layer.Style.Height = Elem.Offseteight + 'PX'; }, removeIframe: function (elem) {var layers = elem.parentnode.getElementsByTagName ('iframe'); while (layers.length> 0) {Ebenen [0] .Parentnode.removechild (Ebenen [0]); }}} window.onload = function () {Magnifier.init ({cont: document.getElementById ('Magnifier'), img: document.getElementById ('MagnifierImg'), Mag: document.getElementById ('Magnifier'), scale: 3}); src = "lib/bilder/1.jpg" id = "img"/> <div id = "browser"> </div> </div> <div id = "mag"> <img id = "MagnifierImg"/> </div> <select style = "Position: absolut; optim: 200px; überschreiben </option> </select> </body> </html>Weitere 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.