JavaScript zum Erzielen eines einfachen Lupeneffekts

In einem großen Kästchen befindet sich ein Bild. Wenn Sie mit der Maus darauf zeigen, wird eine halbtransparente Maskenebene angezeigt. Wenn Sie die Maus bewegen, bewegt sich die Maskenebene mit. Neben dem Kästchen befindet sich außerdem ein vergrößertes Bild. Die Position des vergrößerten Bildes ändert sich mit der Position der Maskenebene. Wenn die Maus das große Kästchen verlässt, verschwinden die Maskenebene und das vergrößerte Bild.

Umsetzungsideen

1. Bearbeiten Sie die Box, die Maskenebene und die vergrößerte Bildseite in HTML und CSS und legen Sie fest, dass die Maskenebene und das vergrößerte Bild standardmäßig ausgeblendet werden
2. Holen Sie sich das Elementobjekt, binden Sie das Mausereignis „Mouseover“ an die große Box, legen Sie die Maskenebene fest und vergrößern Sie die Bildanzeige, wenn die Maus darüber fährt: Stellen Sie die Anzeige auf „Block“ ein.
Mouseout - - -mouseout, Maskenebene festlegen und vergrößerte Bildanzeige, wenn die Maus darüberfährt: Anzeige wird auf „keine“ eingestellt
3. Berechnen Sie die Position der Maus in der großen Box
4. Platzieren Sie die Maus in der Mitte der Maskenebene: Verschieben Sie die Maskenebene relativ zur Mausposition um die halbe Distanz nach oben und links. Positionieren Sie die Maskenebene - - - Positionieren Sie sie absolut und weisen Sie ihr relativ zum Feld einen Versatz nach oben und links zu.
5. Begrenzen Sie die Bewegung der Maskenebene in der großen Box - - - Bestimmen Sie den Wert des Versatzes. Wenn <= 0, ist der Versatz 0
6. Die Position des vergrößerten Bildes ändert sich, wenn sich die Maskenebene bewegt. Bewegungswert der Maskenebene / maximale Bewegungsdistanz der Maskenebene = Bewegungsdistanz des vergrößerten Bildes / maximale Bewegungsdistanz des vergrößerten Bildes. Gemäß dieser Beziehung wird die Bewegungsdistanz des vergrößerten Bildes ermittelt. Die Bewegungsdistanz wird dem Versatz oben und links des vergrößerten Bildes zugewiesen.

Hinweis: Der Versatz des vergrößerten Bildes erhält einen negativen Wert, der der Bewegungsrichtung der Maskenebene entgegengesetzt ist.

Codebeispiel

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Seite mit Mobiltelefondetails</title>
    <!-- <link rel="stylesheet" href="css/detail.css" >
    <script src="js/detail.js"></script> -->
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        .detail-inhalt {
            Breite: 1200px;
            Rand: 0 automatisch;
        }
        
        img {
            Rand: 0;
            vertikale Ausrichtung: Mitte;
        }
        
        .vorschau_img {
            Position: relativ;
            Breite: 400px;
            Höhe: 400px;
            Rand oben: 30px;
            Rand: 1px durchgezogen #ccc;
        }
        
        .preview_img img {
            Breite: 100 %;
            Höhe: 100%;
        }
        
        .Maske {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 300px;
            Höhe: 300px;
            Hintergrundfarbe: rosa;
            Deckkraft: .5;
            Cursor: bewegen;
        }
        
        .groß {
            Anzeige: keine;
            Position: absolut;
            oben: 0;
            links: 410px;
            Breite: 500px;
            Höhe: 500px;
            Rand: 1px durchgezogen #ccc;
            Hintergrundfarbe: rosa;
            Z-Index: 999;
            Überlauf: versteckt;
        }
        
        .bigimg {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 800px;
            Höhe: 800px;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Detail-Inhalt">
        <div Klasse="Vorschaubild">
            <img src="upload/s3.png" alt="">
            <div Klasse="Maske"></div>
            <div Klasse="groß">
                <img src="upload/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>

    <Skript>
        var previewImg = document.querySelector('.preview_img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');

        // Mouseover-Box-Ereignis previewImg.addEventListener('mouseover', function() {
            // Okklusionsebene und vergrößerte Bildanzeige festlegen mask.style.display = 'block';
            großer.Stil.Anzeige = "Block";
        })

        // Maus verlässt das Box-Event previewImg.addEventListener('mouseout', function() {
            // Stellen Sie die Okklusionsebene und das vergrößerte Bild ein, um es auszublenden mask.style.display = 'none';
            big.style.display = "keine";
        })

        // Maus bewegt sich im Feld previewImg.addEventListener('mousemove', function(e) {
            // Position der Maus im Feld abrufen var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

            // Berechnen Sie den Bewegungswert der Okklusionsebene und platzieren Sie die Maus in der Mitte der Okklusionsebene. var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

            // Die Box ist quadratisch, daher wird nur der maximale horizontale Bewegungswert auf der X-Achse berechnet. Der maximale Bewegungswert auf der Y-Achse entspricht der X-Achse var maskMax = previewImg.offsetWidth - mask.offsetWidth;

            // Beschränke die Bewegung der Okklusionsebene innerhalb der Box, wenn (maskX <= 0) {
                MaskeX = 0;
            } sonst wenn (MaskeX >= MaskeMax) {
                MaskeX = MaskeMax;
            }

            wenn (MaskeY <= 0) {
                MaskeY = 0;
            } sonst wenn (MaskeY >= MaskeMax) {
                MaskeY = MaskeMax;
            }

            mask.stil.links = maskX + 'px';
            mask.style.top = maskY + 'px';

            // Berechnen Sie den maximalen Bewegungswert des vergrößerten Bildes, der horizontale Bewegungswert des großen Bildes = der Bewegungswert der Okklusionsebene * die maximale Bewegungsdistanz des großen Bildes / die maximale Bewegungsdistanz der Okklusionsebene var bigMax = bigImg.offsetWidth - big.offsetWidth;

            var bigX = MaskeX * bigMax / MaskeMax;
            var bigY = maskY * bigMax / maskMax;

            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';

        })
    </Skript>
</body>

</html>

Seiteneffekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS-Version des Bildlupeneffekts
js, um einen einfachen Lupeneffekt zu erzielen
js realisiert die Lupenfunktion der Shopping-Website
js, um einfache Lupeneffekte zu erzielen
js lupe vergrößerungsbild effekt
Ein einfaches Beispiel für die Verwendung von js, um den Effekt einer Lupe zu erzielen
JavaScript-Code für den Bildlupeneffekt [der Code ist relativ einfach]
Eine magische Javascript-Bildlupe
JavaScript-Bildlupe (Drag & Drop, Zoom-Effekt)
Lupeneffekt in nativem JS geschrieben

<<: Analyse der MySql-Indexnutzungsstrategie

>>: Analyse des Implementierungsprozesses der Docker-Container-Orchestrierung

HTML-Tabellen-Tag-Tutorial (24): horizontales Ausrichtungsattribut der Zeile ALIGN

JavaScript zum Erzielen eines einfachen Lupeneffekts

Umsetzungsideen

Codebeispiel

HTML-Tabellen-Tag-Tutorial (24): horizontales Ausrichtungsattribut der Zeile ALIGN

CSS Polarkoordinaten Beispielcode

Implementierung der CSS-Rahmenlängensteuerungsfunktion

So konfigurieren Sie https für Nginx in Docker

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Erläuterung der MySQL-Transaktionsauswahl für die Aktualisierung und Datenkonsistenzverarbeitung

Bei der Installation der Version MySql 8.0.16 wird die Verwendung von „UTF8B4“ anstelle von „UTF8B3“ gefordert.

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

Wertschätzung des dezenten und eleganten Webdesigns in Schwarz, Weiß und Grau

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Artikel empfehlen

Einführung in die grundlegenden TypeScript-Typen

wget lädt die gesamte Website (das gesamte Unterverzeichnis) oder ein bestimmtes Verzeichnis herunter

Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

Detaillierte Erklärung der Verwendung des Linux-Befehls „tee“

So verwenden Sie die JSZip-Komprimierung in CocosCreator

Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich

Vue implementiert eine Echtzeitaktualisierung der Zeitanzeige in der oberen rechten Ecke

100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)

Austausch von Designideen für die offizielle Website von Navigation Century

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

Einfaches HTML-Applet für Einkaufsmengen

Zusammenfassung des Umschaltproblems und der Lösung zur Installation mehrerer JDK-Versionen im 64-Bit-System von Win10

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy