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
meta is an auxiliary tag in the head area of htm...
There are probably as many modular solutions for ...
Preface tcpdump is a well-known command-line pack...
I have been working on a project recently - Budou ...
Sometimes, while working with files in the Linux ...
introduction The company's recent Vue front-e...
Table of contents react-native project initializa...
Table of contents 1. How is cross-domain formed? ...
Table of contents 1. WordPress deployment 1. Prep...
This article shares the specific code of js to im...
Table of contents 1. Background running jobs 2. U...
Prerequisite: Save the .frm and .ibd files that n...
Write to the css file Copy code The code is as fol...
First, download a series of things from the Alipa...
Environment Preparation Docker environment MySQL ...