vue放大镜效果 vue实现简单放大镜效果
qq_43561241 人气:0想了解vue实现简单放大镜效果的相关内容吗,qq_43561241在本文为您仔细讲解vue放大镜效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,放大镜,下面大家一起来学习吧。
<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=""> <div class="imgMask"></div> </div> <div class="bigDiv"> <img src="http://img2.zhidianlife.com/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>
效果图:
加载全部内容