Vue implements a simple magnifying glass effect

This article example shares the specific code of Vue to achieve a simple magnifying glass effect for your reference. The specific content is as follows

<template>
    <div>
        <div class="imgMerror">
            <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="">
                <div class="imgMask"></div>
            </div>
            <div class="bigDiv">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        enter(){
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            imgMaskDom.style.display = 'block';
            bigDivDom.style.display = 'block';
        },
        leave(){
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            imgMaskDom.style.display = 'none';
            bigDivDom.style.display = 'none';
        },
        move(e){
            let smallDivDom = document.querySelector('.smallDiv');
            let imgMaskDom = document.querySelector('.imgMask');
            let bigDivDom = document.querySelector('.bigDiv');
            let bigImgkDom = document.querySelector('.bigImg');
 
            let ev = e || window.event;
            let left = ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth/2;
            let top = ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight/2;
            if(left < 0) left=0;
            if (left > smallDivDom.offsetWidth - imgMaskDom.offsetWidth) {
                left = smallDivDom.offsetWidth - imgMaskDom.offsetWidth;
            }
            if(top < 0) top=0;
            if(top > smallDivDom.offsetHeight - imgMaskDom.offsetHeight){
                top = smallDivDom.offsetHeight - imgMaskDom.offsetHeight;
            }
            imgMaskDom.style.left = left + 'px';
            imgMaskDom.style.top = top + 'px';
 
            //Move proportion let precentX = left / (smallDivDom.offsetWidth-imgMaskDom.offsetWidth);
            let precentY = top / (smallDivDom.offsetHeight - imgMaskDom.offsetHeight);
            bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px';
            bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px';
 
        }
    },
}
</script>
 
<style lang="scss">
    *{
        margin: 0;
        padding: 0;
    }
    .imgMerror{
        position: relative;
        padding: 50px;
        .smallDiv{
            border: 1px solid #ccc;
            width: 360px;
            height: 360px;
            position: relative;
            left: 0;
            top: 0;
            img{
                width: 100%;
                height: 100%;
            }
            .imgMask{
                width: 240px;
                height: 240px;
                background: #00ff98;
                opacity: 0.5;
                cursor: move;
                position: absolute;
                left:0;
                top: 0;
                display: none;
            }
        }
        .bigDiv{
            border: 1px solid #ccc;
            width: 540px;
            height: 540px;
            position: relative;
            left: 380px;
            top: -360px;
            overflow: hidden;
            display: none;
            img{
                width: 600px;
                height: 600px;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }
</style>

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue realizes the product magnifying glass effect
Example code of Vue3 encapsulated magnifying glass component
Vue3 realizes the image magnifying glass effect
Vue implements the magnifying glass function of the product details page
Vue implements the magnifying glass effect of tab switching
Vue implements a search box with a magnifying glass
Vue3.0 handwriting magnifying glass effect
Vue implements magnifying glass effect
A handwritten vue magnifying glass effect
Vue3 encapsulates the magnifying glass effect component of Jingdong product details page

<<: Tutorial on installing MYSQL8.0 on Alibaba Cloud ESC

>>: Detailed explanation of error handling examples in MySQL stored procedures