Vue implementiert einen einfachen Lupeneffekt

<Vorlage>
    <div>
        <div Klasse="imgMerror">
            <div class="smallDiv" @mousemove="bewegen($event)" @mouseenter="eingeben()" @mouseleave="verlassen()">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="">
                <div Klasse="imgMask"></div>
            </div>
            <div Klasse="großesDiv">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Daten() {
        zurückkehren {
            
        }
    },
    Methoden: {
        eingeben(){
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            imgMaskDom.style.display = "Block";
            bigDivDom.style.display = "Block";
        },
        verlassen(){
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            imgMaskDom.style.display = "keine";
            bigDivDom.style.display = "keine";
        },
        bewegen(e){
            let smallDivDom = document.querySelector('.smallDiv');
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            let bigImgkDom = document.querySelector('.bigImg');
 
            sei ev = e || Fenster.Ereignis;
            let left = ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth/2;
            let top = ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight/2;
            wenn (links < 0) links = 0;
            wenn (links > smallDivDom.offsetWidth - imgMaskDom.offsetWidth) {
                links = smallDivDom.offsetWidth - imgMaskDom.offsetWidth;
            }
            wenn (oben < 0) oben = 0;
            wenn(oben > smallDivDom.offsetHeight - imgMaskDom.offsetHeight){
                oben = smallDivDom.offsetHeight - imgMaskDom.offsetHeight;
            }
            imgMaskDom.style.left = links + "px";
            imgMaskDom.style.top = oben + 'px';
 
            //Proportion verschieben let precentX = left / (smallDivDom.offsetWidth-imgMaskDom.offsetWidth);
            sei precentY = oben / (smallDivDom.offsetHeight - imgMaskDom.offsetHeight);
            bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px';
            bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px';
 
        }
    },
}
</Skript>
 
<style lang="scss">
    *{
        Rand: 0;
        Polsterung: 0;
    }
    .imgMerror{
        Position: relativ;
        Polsterung: 50px;
        .smallDiv{
            Rand: 1px durchgezogen #ccc;
            Breite: 360px;
            Höhe: 360px;
            Position: relativ;
            links: 0;
            oben: 0;
            img{
                Breite: 100 %;
                Höhe: 100%;
            }
            .imgMask{
                Breite: 240px;
                Höhe: 240px;
                Hintergrund: #00ff98;
                Deckkraft: 0,5;
                Cursor: bewegen;
                Position: absolut;
                links: 0;
                oben: 0;
                Anzeige: keine;
            }
        }
        .bigDiv{
            Rand: 1px durchgezogen #ccc;
            Breite: 540px;
            Höhe: 540px;
            Position: relativ;
            links: 380px;
            oben: -360px;
            Überlauf: versteckt;
            Anzeige: keine;
            img{
                Breite: 600px;
                Höhe: 600px;
                Position: absolut;
                links: 0;
                oben: 0;
            }
        }
    }
</Stil>