vue实现简单放大镜效果

146 阅读 0 评论 97 点赞

我是靠谱客的博主轻松柠檬，最近开发中收集的这篇文章主要介绍vue实现简单放大镜效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了vue实现简单放大镜效果的具体代码，供大家参考，具体内容如下

<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>

效果图：