Auf der Produktseite der Einkaufswebsite befindet sich häufig ein Produktanzeigebereich. Eine Funktion in diesem Bildbereich ist die Vergrößerungsfunktion des Produktbildes. Bewegen Sie den Fokusbereich links, um die Details zu vergrößern und die Details anzuzeigen. Die Details sind wie folgt. Die Methode zur Implementierung dieser Funktion ist ebenfalls sehr einfach.
Experiment: Erstellen eines vergrößerten Bildes des Produktfokus.
Erforderliche Fähigkeiten:
1. Grundlegende Methoden zum Erhalten von Seitenelementen;
2. Ein paar einfache Ereignisse;
3.. Sie verwenden DOM, um die Attribute des Elements festzulegen.
Fallprinzip:
1. Folgen Sie dem Mausereignis der Fokusbox;
2. Vorschriften über den beweglichen Bereich der Fokusbox;
3. Inhaltsanzeige großer Kisten;
Geeignet für: JS -Anfänger
-------------------------------------------------------------------Start! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Zuerst bereiten wir den CSS -Stil vor. Mehrere Punkte, auf die im CSS -Stil geachtet werden müssen, sind:
(1) Die Fokuskarte ist relativ zur Position, Standardanzeige: Keine;
(2) Das Box mit dem großen Bild rechts (im Folgenden als großer Bildrahmen) Standardanzeige: Keine; Der Inhalt im großen Bildrahmen muss nach dem Überlauf versteckt sein: versteckt;
2. Schreiben Sie Skriptcode:
(1) Holen Sie sich zuerst das Seitenelement:
// Zunächst einmal die Elementfunktion getId (Tag) betrieben werden {// eine Methode definieren, um Elemente mit ID zu erhalten, was eine Menge Workload reduziert! return document.getElementById (tag)} var box = getId ("box"); var small = getId ("klein"); var mask = getId ("mask"); var big = getid ("big"); var pic = big.Children [0]; // Hier soll Elemente über die Knotenmethode erhalten(2) Stellen Sie sicher, dass zwei Ereignisse angezeigt werden, wenn sich die Maus zum kleinen Bild bewegt: 1) Das Fokusbox sollte angezeigt werden; 2) Das große Bildbox sollte angezeigt werden. In ähnlicher Weise müssen diese beiden Blätter nach dem Entfernen der Maus abgesagt werden.
// Es werden zwei Effekte angezeigt, wenn die Maus auf das Bild small.onmouseover = function () {mask.style.display = "block" wird; Big.Style.display = "Block"; } small.onmouseout = function () {mask.style.display = "none"; big.style.display = "none"}(3) Stellen Sie die folgenden Fokuskasten fest:
1) Wenn das Fokusfeld festgelegt ist, ist unsere folgende Zeit eine Tatsache, sodass der Ereignisentyp hier nicht onmouseover ist. aber Onmousemove;
2) Das Problem, das an diesem Code beteiligt ist, ist hauptsächlich ein Maske (Focus -Box) -Positionierungsberechnungsproblem. Das Problem, das leicht zu ignorieren ist, ist, wessen Position sich die Maske bewegt? In meinem CSS -Stil wird die Maske in die kleine Box platziert, sodass die relative Bewegungsposition die Position des kleinen übergeordneten übergeordneten Elements sein muss. Daher können die Positionskoordinaten, die ich mit Clientx und Clienty in Bezug auf das aktuelle Fenster des Browsers bekomme, nicht direkt verwendet werden, und der Einfluss des Randwerts seines übergeordneten Box muss subtrahiert werden.
// Setzen Sie die Fokusbox des kleinen Bildes und folgen Sie der Maus. small.onmousemove = function (e) {var marginl = box.offsetLeft; // Verwenden Sie die OffsetLeft-Methode, um den Rand des Boxs var margint = box.offsettop zu erhalten; // Verwenden Sie die Offsettop-Methode, um den Rand des Box var curralx = e.clientX zu erhalten; var currentyy = e.clienty; // Verwenden Sie e.klinety und e.klinety relativ zur oberen linken Ecke des Browsers var x = currentX-marginl-mask.Offsetwidth/2; var y = currentyy-margint-maske.offseteight/2; // Um die Mitte der Fokusbox mit der Maus auszurichten, müssen Sie die Hälfte der Breite und der Höhe des Fokus abziehen Kasten/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) Bewegung der Position des Leerlauffokusboxs
1) Nach Abschluss des vorherigen Schritts ist die Bewegung des Fokusboxs nicht im Leerlauf. Während des Durchsuchens der Einkaufswebsite können wir eindeutig das Gefühl haben, dass die Fokusbox keine Bewegung außerhalb des kleinen Bildes zulässt, was zu einer schlechten Benutzererfahrung führt.
2) Um die Bewegung des Fokusfelds zu begrenzen, hauptsächlich wenn die x- und y -Änderung den zulässigen Wert überschreitet, geben Sie ihm einen festen Wert.
// Setzen Sie die Fokusbox des kleinen Bildes und folgen Sie der Maus. small.onmousemove = function (e) {var marginl = box.offsetLeft; var margint = box.offsettop; var curr CurrentX = e.clientX; var currentyy = e.clienty; var x = currentX-marginl-mask.Offsetwidth/2; var y = currentyy-margint-maske.offseteight/2; // Setzen Sie den Umzugsbereich für das Fokusfeld if (x <0) {x = 0;} if (x> small.Offsetwidth-mask.Offsetwidth) {x = small.offsetwidth-mask.Offsetwidth}; // Der für die Positionierung verwendete Mindestwert von X beträgt 0, und der Maximalwert beträgt die Länge der Y-Achse mit kleiner Masken. Gleiches gilt für die y-Achse if (y <0) {y = 0;} if (y> small.offseteightheightheightheightheightheight) {y = small.offseteightheigheightheightheightheightheightheight}; mask.Style.left = x+"px"; // Beachten Sie, dass der Umzugsbereich nach Angabe des Bewegungsbereichs geschrieben ist, und achten Sie auf die Ausführungsreihenfolge der Codemaske.style.top = y+"px";(5) Stellen Sie die Anzeige großer Bilder fest
1) Um die Bewegung des Bildes in der großen Box zu verwirklichen, sollten Sie an den MARGIN -Wert denken.
2) Wie viel Abstand kann Sie bewegen, um die linken und die oberen Werte der Maske mit einem festen Anteil zu multiplizieren. Denken Sie an die Position in der oberen linken Ecke des Fokusbereichs und die obere linke Ecke des großen Bildrahmens sind gleich! ! ! Dies ist nicht sehr schwer zu verstehen.
// Setzen Sie den Inhalt im Big Box var relativex = mask.offsetLeft; var relativy = mask.offsettop; var proporationx = pic.Offsetwidth/small.offsetwidth; // Setzen Sie das Verhältnis var proporationy = pic.offseteight/small.offsetwidth; pic.Style.Marginleft = -Relativex*proporationx+"px"; //Notiz! Der Wert der Marge muss negativ sein, "PX werfen Sie nicht weg.
Zu diesem Zeitpunkt ist unsere Demo fertig! Ist es nicht sehr einfach?
Ich werde den gesamten Code unten einfügen, in der Hoffnung, mit Ihnen zu diskutieren und zu kommunizieren.
Hier ist der CSS -Code
<Styles> * {Margin: 0; Polsterung: 0; } #Box {Margin: 50px; } #small {width: 229px; Höhe: 250px; Grenze: 1PX Solid Black; Text-Align: Mitte; Position: Relativ; float: links; } #mask {width: 100px; Höhe: 100px; Hintergrundfarbe: RGBA (214, 111, 193, 0,3); Position: absolut; Top: 0; links: 0; /*Anzeige: Keine;*/} #Big {width: 350px; Höhe: 350px; Grenze: 1PX Solid Black; float: links; Überlauf: versteckt; /*Anzeige: Keine;*/} </style>Hier ist HTML
<body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </div> </div> <div id = "big"> <img src = "big_img.jpg"/> </> </div> </div> </div>
Hier ist der JS -Code
<Script> // Zunächst das Element, das betätigte Funktion GetID (Tag) {return document.getElementById (tag)} var box = getId ("box"); var small = getId ("klein"); var mask = getId ("mask"); var big = getid ("big"); var pic = big.Children [0]; console.log (pic); // Die Maus bewegt sich zum Bild und zwei Effekte erscheinen klein. Big.Style.display = "Block"; } small.onmouseout = function () {mask.style.display = "none"; Big.Style.display = "Keine"} // Setzen Sie das Fokusfeld des kleinen Bildes und folgen Sie der Maus; small.onmousemove = function (e) {var marginl = box.offsetLeft; var margint = box.offsettop; var curr CurrentX = e.clientX; var currentyy = e.clienty; var x = currentX-marginl-mask.Offsetwidth/2; var y = currentyy-margint-maske.offseteight/2; // Setzen Sie den Umzugsbereich für das Fokusfeld if (x <0) {x = 0;} if (x> small.Offsetwidth-mask.Offsetwidth) {x = small.offsetwidth-mask.Offsetwidth}; if (y <0) {y = 0;} if (y> small.offseteightheightheightheightheigheight) {y = small.offseteightheigheight-mask.offseteight}; mask.Style.left = x+"px"; mask.Style.top = y+"px"; // Setzen Sie den Inhalt im großen Box var relativex = mask.offsetLeft; var relativy = mask.offsettop; var relativy = mask.offsettop; var proporationx = pic.Offsetwidth/small.offsetwidth; var proporationy = pic.offseteightheightheightheightheightheightwidth; pic.Style.Marginleft = -Relativex*proporationx+"px"; pic.Style.Margintop = -Relativey*proporationy+"px"; } </script>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.