vue實現簡單放大鏡效果
阿新 • • 發佈:2021-08-19
本文例項為大家分享了實現簡單放大鏡效果的具體程式碼,供大家參考,具體內容如下
<template> <div> <div class="imgMerror"> <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()"> <img src="http://img2.zhidianlife.com/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="vue實現簡單放大鏡效果"> <div class="imgMask"></div> </div> <div class="bigDiv"> <img src="http://img2.zhidianlife.com/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="vue實現簡單放大鏡效果" 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'; ieqXWbigDivDom.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.offsetWidtwww.cppcns.comh - 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="s"> *{ 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{ www.cppcns.com 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>
效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。