Vue implements a simple magnifying glass effect

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

Recommend

Introduction to the use of http-equiv attribute in meta tag

meta is an auxiliary tag in the head area of ​​htm...

CSS modular solution

There are probably as many modular solutions for ...

iFrame is a great way to use it as a popup layer to cover the background

I have been working on a project recently - Budou ...

5 Ways to Clear or Delete Large File Contents in Linux

Sometimes, while working with files in the Linux ...

Detailed explanation of the basic use of react-navigation6.x routing library

Table of contents react-native project initializa...

Causes and solutions for cross-domain issues in Ajax requests

Table of contents 1. How is cross-domain formed? ...

Implementation of Docker Compose multi-container deployment

Table of contents 1. WordPress deployment 1. Prep...

js to realize the mouse following game

This article shares the specific code of js to im...

InnoDB type MySql restore table structure and data

Prerequisite: Save the .frm and .ibd files that n...

Sample code for implementing Alipay sandbox payment with Vue+SpringBoot

First, download a series of things from the Alipa...

Detailed tutorial on installing nacos in docker and configuring the database

Environment Preparation Docker environment MySQL ...