vue实现简单放大镜效果

本文实例为大家分享了vue实现简单放大镜效果的具体代码，供大家参考，具体内容如下

<template> <div><div class='imgMerror'> <div @mousemove='move($event)' @mouseenter='enter()' @mouseleave='leave()'><img src='https://rkxy.com.cn/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg' alt=''><div class='imgMask'></div> </div> <div class='bigDiv'><img src='https://rkxy.com.cn/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’; //移动比例 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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。