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

Docker stop stops/remove deletes all containers

This article mainly introduces Docker stop/remove...

Nginx stream configuration proxy (Nginx TCP/UDP load balancing)

Prelude We all know that nginx is an excellent re...

Native JS to achieve image marquee effects

Today I will share with you a picture marquee eff...

Detailed explanation of MySQL alter ignore syntax

When I was at work today, the business side asked...

A Brief Analysis on the Time Carrying Problem of MySQL

The default time type (datetime and timestamp) in...

Solution to the problem of invalid line-height setting in CSS

About the invalid line-height setting in CSS Let&...

Learn SQL query execution order from scratch

The SQL query statement execution order is as fol...

Detailed explanation of MySQL clustered index and non-clustered index

1. Clustered Index Table data is stored in the or...

Three principles of efficient navigation design that web designers must know

Designing navigation for a website is like laying...

Difference between varchar and char types in MySQL

Table of contents aforementioned VARCHAR Type VAR...

Javascript to achieve drumming effect

This article shares the specific code of Javascri...

In-depth understanding of CSS @font-face performance optimization

This article mainly introduces common strategies ...

26 Commonly Forgotten CSS Tips

This is a collection of commonly used but easily ...

Summary of using MySQL online DDL gh-ost

background: As a DBA, most of the DDL changes of ...