JavaScript realisiert Lupen-Spezialeffekte

Der zu erzielende Effekt: Wenn die Maus auf das kleine Bild gelegt wird, erscheint über dem kleinen Bild ein kleiner Block, und der Bereich innerhalb dieses kleinen Blocks wird vergrößert und im großen Bild rechts angezeigt (siehe Abbildung unten).

Dieser Effekt verwendet hauptsächlich: Mauskoordinaten e.clientX, e.clientY, Offsets offsetLeft, offsetTop, offsetWidth, sffsetHeight und andere Eigenschaften.

HTML- und CSS-Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Hintergrund: #2c3e50;

        }
        .wickeln{
            Anzeige: Flex;            
            Position: relativ;
            links: 200px;
            oben: 30px;
        }
        .klein{
            Breite: 500px;
            Höhe: 300px;
            Rahmenradius: 20px;
            Überlauf: versteckt;
            Position: relativ;
            links: 0px;
        }
        .kleines Bild{
            Breite: 100 %;
            Höhe: 100%;
        }
        .kleine Spanne{
            Anzeige: keine;
            Position: absolut;  
            links: 0;
            oben: 0;      
            Breite: 100px;
            Höhe: 100px;
            Hintergrund: rgba(0,0,0,0,5);
            Cursor: Zeiger;
            Z-Index: 1;
        }
        .groß{
            Anzeige: keine;
            Breite: 400px;
            Höhe: 400px;
            Überlauf: versteckt;
            Position: relativ;
            links: 50px;
            oben: 0;
        }
        .bigimg{
            Position: absolut;
            links: 0;
            oben: 0; 
            Breite: 1000px;
            Höhe: 600px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="wrap">
        <div Klasse="klein">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div Klasse="groß">
            <img src="img/33.jpg" alt="">
        </div>
    </div>

</body>
</html>

JS-Teil:

Bewegen Sie die Maus in die Lupe (der kleine Block auf dem kleinen Bild), um das große Bild rechts anzuzeigen

//Der größte Container let wrap=document.querySelector('.wrap');
//Kleiner Bildteil let smallWrap=document.querySelector('.wrap .small');
let smallImg = document.querySelector('.wrap .small img');
let smallBox = document.querySelector('.wrap .small span');
//Teil des Gesamtbildes let bigBox=document.querySelector('.wrap .big');
let bigImg = document.querySelector('.wrap .big img');
smallWrap.onmouseover=Funktion(){
       smallBox.style.display="Block";
       bigBox.style.display="Block";
}

Wenn die Maus über das Miniaturbild bewegt wird, folgt die Lupe der Bewegung. Verwenden Sie event.clientX und event.clientY des Ereignisobjekts, um die Koordinaten der Maus abzurufen.

Über event.clientX und event.clientY können Sie die Position der Maus, den Versatz des übergeordneten Containers und den Versatz der Lupe abrufen (im tatsächlichen Projekt kann ein Versatz für die Lupe festgelegt werden. Um den Einfluss dieses Versatzes zu entfernen, muss dieser Versatz abgezogen werden). Beim Lupeneffekt befindet sich die Maus immer in der Mitte des kleinen Blocks, sodass die Bewegungsposition auf diese Weise ermittelt werden kann.

smallWrap.onmousemove=Funktion(e){
            : Lassen Sie moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            sei maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            sei maxY = smallWrap.offsetHeight - smallBox.offsetHeight;


            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

Ab diesem Zeitpunkt folgt die Lupe der Mausbewegung. Sie müssen außerdem eine Reichweitenbegrenzung hinzufügen, da sich die Lupe sonst weiter bewegt als das kleine Bild.

Umfangsbeschränkung

smallWrap.onmousemove=Funktion(e){
            : Lassen Sie moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            sei maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            sei maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Bereichsbegrenzungsmethode 1/* if(moveX<0){
                bewegeX=0;
            }sonst wenn(moveX>=maxX){
                bewegeX=maxX
            }
            wenn(moveY<0){
                bewegeY=0;
            }sonst wenn(moveY>=maxY){
                bewegeY=maxY
            } */
             //Bereichsbegrenzungsmethode 2 moveX=Math.min(maxX,Math.max(0,moveX))
            bewegeY=Math.min(maxY,Math.max(0,bewegeY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

Nachdem die Lupe der Bewegung der Maus folgt, besteht der nächste Schritt darin, zu erkennen, dass sich bei Bewegung der Lupe auch das große Bild bewegt (die Bewegungsrichtung des großen Bildes ist entgegengesetzt). Die Entfernung, über die sich die Lupe bewegt, ist proportional zur Entfernung, über die sich das große Bild bewegt, die Breite des kleinen Bildes ist proportional zur Breite des großen Bildes (einschließlich des nicht angezeigten Teils) und die maximale Entfernung, über die sich das kleine Bild bewegen kann, ist ebenfalls proportional zur maximalen Entfernung, über die sich das große Bild bewegen kann. Mit diesen beiden Formeln kann also berechnet werden, wie weit sich das große Bild bewegen sollte.

Die Entfernung, über die sich die Lupe bewegt / die Breite des kleinen Bildes = die Entfernung, über die sich das große Bild bewegt / die Breite des großen Bildes. Obwohl diese Formel umgesetzt werden kann, gibt es keine Begrenzung für die maximale Bewegungsentfernung, die zu diesem Effekt führt.

Die Formel müsste also lauten: Entfernung, über die sich die Lupe bewegt / Breite des Daumennagels - Breite der Lupe (das ist der maximale Bewegungsbereich der Lupe)

Die Entfernung, über die sich die Lupe bewegt / (die Breite des kleinen Bildes – die Breite der Lupe) = die Entfernung, über die sich das große Bild bewegt / (die Breite des großen Bildes – der Anzeigebereich des großen Bildes)

Beachten Sie, dass die Bewegungsrichtung des großen Bildes der Bewegungsrichtung der Lupe entgegengesetzt ist!

smallWrap.onmousemove=Funktion(e){
            : Lassen Sie moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            sei maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            sei maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Bereichsbegrenzungsmethode 1/* if(moveX<0){
                bewegeX=0;
            }sonst wenn(moveX>=maxX){
                bewegeX=maxX
            }
            wenn(moveY<0){
                bewegeY=0;
            }sonst wenn(moveY>=maxY){
                bewegeY=maxY
            } */
             //Bereichsbegrenzungsmethode 2 moveX=Math.min(maxX,Math.max(0,moveX))
            bewegeY=Math.min(maxY,Math.max(0,bewegeY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth maximale Bewegungsposition let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.OffsetWidth-bigBox.OffsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }

Fügen Sie abschließend das Ereignis „Maus raus“, „Maus raus“, „Lupe“ und „Großes Bild ausblenden“ hinzu.

smallWrap.onmouseout=Funktion(){
            smallBox.style.display="keine";
            bigBox.style.display="keine";
       }

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
            Hintergrund: #2c3e50;

        }
        .wickeln{
            Anzeige: Flex;            
            Position: relativ;
            links: 200px;
            oben: 30px;
        }
        .klein{
            Breite: 500px;
            Höhe: 300px;
            Rahmenradius: 20px;
            Überlauf: versteckt;
            Position: relativ;
            links: 100px;
        }
        .kleines Bild{
            Breite: 100 %;
            Höhe: 100%;
        }
        .kleine Spanne{
            Anzeige: keine;
            Position: absolut;  
            links: 0;
            oben: 0;      
            Breite: 100px;
            Höhe: 100px;
            Hintergrund: rgba(0,0,0,0,5);
            Cursor: Zeiger;
            Z-Index: 1;
        }
        .groß{
            Anzeige: keine;
            Breite: 400px;
            Höhe: 400px;
            Überlauf: versteckt;
            Position: relativ;
            links: 120px;
            oben: 0;
        }
        .bigimg{
            Position: absolut;
            links: 0;
            oben: 0; 
            Breite: 1000px;
            Höhe: 600px;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="wrap">
        <div Klasse="klein">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div Klasse="groß">
            <img src="img/33.jpg" alt="">
        </div>
    </div>
    <Skript>
        //Der größte Container let wrap=document.querySelector('.wrap');
       //Kleiner Bildteil let smallWrap=document.querySelector('.wrap .small');
       let smallImg = document.querySelector('.wrap .small img');
       let smallBox = document.querySelector('.wrap .small span');
        //Teil des Gesamtbildes let bigBox=document.querySelector('.wrap .big');
       let bigImg = document.querySelector('.wrap .big img');
       smallWrap.onmouseover=Funktion(){
            smallBox.style.display="Block";
            bigBox.style.display="Block";
       }
       smallWrap.onmousemove=Funktion(e){
            : Lassen Sie moveX = e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            sei maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            sei maxY = smallWrap.offsetHeight - smallBox.offsetHeight;

           
            //Bereichsbegrenzungsmethode 1/* if(moveX<0){
                bewegeX=0;
            }sonst wenn(moveX>=maxX){
                VerschiebeX=maxX
            }
            wenn(moveY<0){
                bewegeY=0;
            }sonst wenn(moveY>=maxY){
                bewegeY=maxY
            } */
             //Bereichsbegrenzungsmethode 2 moveX=Math.min(maxX,Math.max(0,moveX))
            bewegeY=Math.min(maxY,Math.max(0,bewegeY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth maximale Bewegungsposition let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.OffsetWidth-bigBox.OffsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }
       smallWrap.onmouseout=Funktion(){
            smallBox.style.display="keine";
            bigBox.style.display="keine";
       }
    </Skript>
</body>
</html>

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:

Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
JavaScript imitiert die Spezialeffekte der Jingdong-Lupe
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
JavaScript imitiert den Jingdong-Lupeneffekt
JavaScript imitiert den Taobao-Lupeneffekt
JavaScript zum Erzielen eines Lupeneffekts
Ideen und Codes zur Realisierung des Lupeneffekts in js
JavaScript-Implementierung von Lupendetails

<<: Detaillierte Erläuterung von Django + Vue + Docker zum Erstellen einer Schnittstellentestplattform

>>: Tipps zur Verwendung von Frameset zum Zentrieren des Breitbilds

Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Gespeicherte Funktionen Was ist eine gespeicherte...

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Manchmal möchten wir eine solche Funktion impleme...

JavaScript realisiert Lupen-Spezialeffekte

Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)

Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt

Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join

Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

Lösung für den ES-Speicherüberlauf beim Starten von Docker

Ein nützliches mobiles Scrolling-Plugin BetterScroll

Eine kurze Analyse der Crontab-Aufgabenplanung in Linux

Lösen Sie das Problem, dass bei der Set-Operation kein NULL gefunden wird, nicht wie bei MySQL

Zusammenfassung der Vue3-Slot-Nutzung

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.16

So verwenden Sie Docker, um Containerressourcen zu begrenzen

Lösung für das Problem, dass Xshell keine Verbindung zur virtuellen VirtualBox-Maschine herstellen kann

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

So legen Sie den Standardwert eines MySQL-Felds fest

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

MySQL-Methode zur Sperrensteuerung für Parallelität

React implementiert doppelten Schieberegler zum Querschieben

HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Docker Swarm von der Bereitstellung bis zum grundlegenden Betrieb

Design Association: Warum haben Sie am falschen Ort gesucht?

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

Der Unterschied zwischen div und span in HTML (Gemeinsamkeiten und Unterschiede)

MySQL-Methode zum rekursiven Suchen nach allen untergeordneten Knoten eines Menüknotens