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

Lebenszyklus und Hook-Funktionen in Vue

Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....

Detaillierte Erläuterung der Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten

Inhaltsverzeichnis Was sind flaches und tiefes Kl...

Detaillierte Erläuterung des Vue Router Routing Guard

Inhaltsverzeichnis 1. Global vor jedem 1. Global ...

Detaillierte Erklärung zum Schreiben mehrerer Bedingungen von CSS: nicht

Der Pseudoklassenselektor :not kann Elemente filt...

Detaillierte Erklärung des TIMESTAMPDIFF-Falls in MySQL

1. Syntax TIMESTAMPDIFF(Einheit, Beginn, Ende); G...

Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS3

Als ich kürzlich das Intranet-Portal änderte, sti...

So legen Sie das Root-Passwort des Benutzers und die Remote-Verbindungsmethode für die Alibaba Cloud ECS-Instanz fest

Nach dem Kauf eines Alibaba Cloud-Servers müssen ...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Jeden Tag ein jQuery-Plugin - Schritt-Fortschritt...

Detaillierte Erklärung der Docker-Nutzung unter CentOS8

1. Installation von Docker unter CentOS8 curl htt...

Natives JS zur Implementierung einer Echtzeituhr

Teilen Sie einen Echtzeituhreffekt, der mit nativ...

So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen

Inhaltsverzeichnis Technologie-Stack Backend-Buil...

Detaillierte Erläuterung, wie Vue Werte zurückgibt, um Formulare dynamisch zu generieren und Daten zu übermitteln

Inhaltsverzeichnis Die wichtigsten gelösten Probl...

Mit CSS3 erstellte Buchseitenumblättereffekte

Ergebnis:Implementierungscode: html <!-- Wenn ...

Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid

Einführung in Selenium Grid Obwohl einige neue Fu...