JavaScript realisiert Lupen-Spezialeffekte

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

Artikel empfehlen

Tipps zur Optimierung von MySQL SQL-Anweisungen

Wenn wir mit einer SQL-Anweisung konfrontiert wer...

Binäre Installation von MySQL 5.7.23 unter CentOS7

Die Installationsinformationen im Internet sind u...

CSS3 verwendet Transform, um eine bewegliche 2D-Uhr zu erstellen

Nachdem wir den transform Kurs abgeschlossen habe...

HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion

Inhaltsverzeichnis Vorwort: erreichen: Zusammenfa...

Das Vue-CLI-Framework implementiert eine Timer-Anwendung

Technischer Hintergrund Diese Anwendung verwendet...

So zeigen Sie die Ausführungszeit von MySQL-Anweisungen über Query Profiler an

Im vorherigen Artikel wurden zwei Methoden zum Üb...

Erfahren Sie schnell, wie Sie mit der Vuex-Statusverwaltung in Vue3.0 beginnen

Vuex ist ein speziell für Vue.js-Anwendungen entw...

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Methode 1: Verwenden Sie Tabellenattribute: Heade...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...

So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung

Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...

W3C Tutorial (7): W3C XSL Aktivitäten

Ein Stylesheet beschreibt, wie ein Dokument angez...

HTML+CSS3-Code zur Realisierung des Animationseffekts der Planeten des Sonnensystems

Erstellen Sie eine Animation der acht Planeten de...

Mehrere Methoden zum Löschen von Floating (empfohlen)

1. Fügen Sie ein leeres Element desselben Typs hi...

Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel

Was ist ein Primärschlüssel? Ein Primärschlüssel ...

So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen

Ich habe MySQL auf meinem Computer längere Zeit n...