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:
|
<<: Tutorial on installing MYSQL8.0 on Alibaba Cloud ESC
>>: Detailed explanation of error handling examples in MySQL stored procedures
This article mainly introduces Docker stop/remove...
Prelude We all know that nginx is an excellent re...
Today I will share with you a picture marquee eff...
1. iframe definition and usage The iframe element...
When I was at work today, the business side asked...
The default time type (datetime and timestamp) in...
About the invalid line-height setting in CSS Let&...
The SQL query statement execution order is as fol...
1. Clustered Index Table data is stored in the or...
Designing navigation for a website is like laying...
Table of contents aforementioned VARCHAR Type VAR...
This article shares the specific code of Javascri...
This article mainly introduces common strategies ...
This is a collection of commonly used but easily ...
background: As a DBA, most of the DDL changes of ...