基于Vue的图片放大镜组件封装，供大家参考，具体内容如下
图片放大镜的实现过程是将一个小图放置在一个盒子里,当鼠标在小图盒子里移动时，出现一个移动块(阴影区域/遮罩层),右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。效果图如下：

文章图片

实现图片放大镜效果的Vue组件代码如下：

//css样式@import 'src/assets/scss/variable.scss'; #float {width: 120px; height: 120px; position: absolute; //必须background: $primary; border: 1px solid #ccc; opacity: 0.5; cursor:move ; }#big {position: absolute; //必须top: 260px; left: 37.6%; width: 350px; height: 500px; overflow: hidden; border: 1px solid #ccc; background: #ffffff; z-index: 1; visibility: hidden; }#small {position: relative; //必须z-index: 1; img{width:340px; height:320px; }}#big img {position: absolute; //必须z-index: 5; width:700px; height:700px; }

move = function (ev){var scroll =this.getClientHeight(); //得到当前界面移动的位置var l = ev.clientX- small.offsetLeft - float.offsetWidth/2; var t = ev.clientY- small.offsetTop - float.offsetHeight/2; t=t+scroll; //遮罩层移动的高度应该相应的加上界面滚动的高度if( l < 0 ) l = 0; if( t < 0 ) t = 0; if( l > float_maxJL_l ) l = float_maxJL_l; if( t > float_maxJL_t ) t = float_maxJL_t; var scaleL = l/float_maxJL_l; var scaleT = t/float_maxJL_t; float.style.left = l + "px"; float.style.top = t + "px"; bigImg.style.left = -scaleL * bigImg_maxJL_l + "px"; bigImg.style.top = -scaleT * bigImg_maxJL_t + "px"; },//获取界面滚动的高度的方法getClientHeight: function(){var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop; }else if(document.body){scrollTop=document.body.scrollTop; }return scrollTop; }