vue實現(xiàn)簡單放大鏡效果

更新時間：2021年08月18日 17:04:33 作者：qq_43561241

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單放大鏡效果的具體代碼，供大家參考，具體內容如下

<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';
 
            //移動比例
            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>

效果圖：