js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

<div id="box">
    <div Klasse="anzeigen">
        <img src="./images/1.jpg" alt="#">
        <div Klasse="ziehen"></div>
    </div>
    <div Klasse="vergrößern"></div>
    <ul>
        <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
        <li><img src="./images/2.small.jpg" alt="#"></li>
    </ul>
</div>

<script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

<Skript>
    const oBox = document.querySelector('#box');
    
    const imgArr = [
        {klein: '1.small.jpg', normal: '1.jpg', groß: '1.big.jpg'},
        {klein: '2.small.jpg', normal: '2.jpg', groß: '2.big.jpg'}
    ];
</Skript>

Körper, div, ul, li {
    Rand: 0; Polsterung: 0;
    Listenstil: keiner;
    Schriftgröße: 0;
}
img{
    Anzeige: Block;
}
#Kasten{
    Breite: 650px;
    Position: relativ;
    Rand: 0 automatisch 0 240px;
}
#box .zeigen{
    Breite: 600px;
    Rand: durchgehend 2px Hotpink;
    Position: relativ;
}
#box .img anzeigen{
    Breite: 100 %;
}
#box .zeigen .ziehen{
    Position: absolut;
    Breite: 200px;
    Höhe: 200px;
    Hintergrundfarbe: #e0a8d7;
    Deckkraft: .4;
    links: 0;
    oben: 0;
    Anzeige: keine;
}
#box .vergrößern{
    Breite: 800px;
    Höhe: 800px;
    Rand: durchgezogen 2px #7d777b;
    Position: absolut;
    links: 100 %;
    oben: 0;
    Hintergrund: URL("../images/1.big.jpg") keine Wiederholung 0 0 / 2400px;
    Anzeige: keine;
}
#box ul{
    Breite: 100 %;
    Höhe: 150px;
    Rand oben: 20px;
}
#box ul::nach{
    Inhalt: '';
    Anzeige: Block;
    klar: beides;
}
#box ul li{
    Höhe: 100%;
    schweben: links;
    Rand: 0,8px;
    Rand: durchgezogen 2px #fff;
}
#box ul li.aktiv{
    Rahmenfarbe: Pink;
}
#box ul li img{
    Höhe: 100%;
}

Klasse MgnGlass {
    Konstruktor(Element, Array) {
        dies.ele = ele;
        dies.array = Array;

        dies.show = ele.querySelector('.show');
        dies.showImg = dies.show.querySelector('img');
        dies.ziehen = ele.querySelector('.ziehen');
        dies.magnify = ele.querySelector('.magnify');
        dies.oUl = ele.querySelector('ul');
        this.oUlis = ele.querySelectorAll('ul li');
    }

 // Definiere eine Methode um alle später definierten Methoden aufzurufen // Einstiegsfunktion init() {
        dies.setMouse();
        dies.setPosition();
        dies.setTab();
    }

    //Mausbewegung rein und raus setMouse() {
     //Mit der Maus darüberfahren, den Bildbereich anzeigen und die Deckebene und die Lupe anzeigen this.show.addEventListener('mouseover', () => {
            this.drag.style.display = "Block";
            dies.magnify.style.display = "Block";
        });
        //Maus raus, Bildbereich einblenden, Deckebene und Lupe ausblenden this.show.addEventListener('mouseout', () => {
            this.drag.style.display = "keine";
            this.magnify.style.display = "keine";
        });
    }

 // Positionseffekt festlegen // Wenn sich die Maus im Bildbereich bewegt // 1. Lassen Sie die Deckebene der Mausbewegung folgen --- ähnlich dem vorherigen Mauszieheffekt setPosition() {
        this.show.addEventListener('Mausbewegung', (e) => {
            e = e || Ereignis;
            // 1. Deckebene positionieren // Koordinatenposition der linken oberen Ecke der Deckebene anhand der Mausposition berechnen let x = e.clientX - this.ele.offsetLeft - this.ele.clientLeft - this.drag.clientWidth / 2;
            lass y = e.clientY - this.ele.offsetTop - this.ele.clientTop - this.drag.clientHeight / 2;

   // 2. Setze den Grenzwert // Minimum ist 0, Maximum ist Breite und Höhe des übergeordneten Divs - Breite und Höhe der Deckebene if (x < 0) {
                x = 0;
            }
            sonst wenn (x > (this.show.clientWidth - this.drag.clientWidth)){
                x = diese.show.clientWidth - diese.drag.clientWidth;
            }
            wenn (y < 0){
                y = 0;
            }
            sonst wenn (y > (this.show.clientHeight - this.drag.clientHeight)){
                y = diese.show.clientHeight - diese.drag.clientHeight;
            }

   // 3. Positioniere den Wert auf der Deckebene this.drag.style.left = x + 'px';
            dies.drag.style.top = y + "px";

   // 4. Das Hintergrundbild der Lupe rechts muss mitbewegt werden // Positionierung zum Hintergrundbild hinzufügen // Das Bild links ist stationär und die Deckebene bewegt sich Deckebene bewegt sich 100 100
            // Rechts ist die Lupe, die sich nicht bewegt, und das Hintergrundbild bewegt sich. Hintergrundbild bewegt sich -100 -100
            // Beim Verschieben muss die Positionierung entsprechend der Proportion eingestellt werden // Positionierung des Hintergrundbildes = Größe des Hintergrundbildes * Positionierung der Deckebene / Bildgröße // Berechnen Sie den Positionierungswert des Hintergrundbildes anhand der Proportion der Bewegung der Deckebene let backX = 2400 * x / 600;
            lass zurückY = 2400 * y / 600;

   // Hintergrundbild positionieren // Hintergrundbild positionieren this.magnify.style.backgroundPosition = `-${backX}px -${backY}px`;
        })
    }

 // Umschalteffekt // 1. Füge dem Label, über dem sich der Mauszeiger befindet, einen Stil hinzu // Entferne die Stile von allen Labels und füge dem Label, auf das aktuell geklickt bzw. über das der Mauszeiger bewegt wird, einen Stil hinzu setTab() {
        this.oUlis.forEach((Element, Schlüssel) => {
            item.addEventListener('mouseover', () => {
             // 1, lösche den Stil aller li-Tags this.oUlis.forEach((item2) => {
                    item2.Klassenname = '';
                });
                // 2. füge dem aktuellen Tag einen Stil hinzu. item.className = 'active';

    // 3. Bild festlegen // Der Indexindexschlüssel des aktuellen Labels ist der Indexindex des Bildes, das im entsprechenden Bildarray angezeigt werden soll. // 1. Pfad für das Bildlabel festlegen // Entsprechenden Bildnamen über Array, Index und Bildattribute abrufen // label.src = Zuweisung oder label.setAttribute('src', Attributwert) this.showImg.setAttribute('src', `./images/${this.array[key].normal}`);
                // 2. Legen Sie den Pfad des Hintergrundbildes für den Lupenbereich fest. // Alle Einstellungen zum Hintergrundbild müssen neu geschrieben werden this.magnify.style.background = `url('./images/${this.array[key].big}') no-repeat 0 0 / 2400px`;
            })
        })
    }
}

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1.0">
    <title>Lupe</title>
    <link rel="stylesheet" type="text/css" href="./css/mgfyGlass.css" >
</Kopf>
<Text>
    <div id="box">
        <div Klasse="anzeigen">
            <img src="./images/1.jpg" alt="#">
            <div Klasse="ziehen"></div>
        </div>
        <div Klasse="vergrößern"></div>
        <ul>
            <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
            <li><img src="./images/2.small.jpg" alt="#"></li>
        </ul>
    </div>

    <script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

    <Skript>
        const oBox = document.querySelector('#box');
        
        const imgArr = [
            {klein: '1.small.jpg', normal: '1.jpg', groß: '1.big.jpg'},
            {klein: '2.small.jpg', normal: '2.jpg', groß: '2.big.jpg'}
        ];
        
        const mgnGlass = neues MgnGlass(oBox, imgArr);
    
        mgnGlass.init();
    
    
    </Skript>
</body>
</html>