Vue图片放大镜组件的封装使用详解

基于Vue的图片放大镜组件封装，供大家参考，具体内容如下

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

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

//css样式

在css中需要注意设置各个图片以及遮罩层的位置即position。

遮罩层分析：

左侧遮罩层的宽(高) = 右侧可视区域的宽（高）/右侧大图的宽（高）*左侧小图的宽（高）
（遮罩层可以理解为模拟右侧大图盒子，在右侧大图盒子中放置的是一张大的图片，然后根据一定比例得到浮动区域，同时将盒子设置成溢出隐藏。右侧大图相对于右侧容器的呈现比例和左侧遮罩层相对于左侧容器的比例相对应）
遮罩层运动的距离=左侧容器的宽（高）-遮罩层的宽（高）；（使其总是在左侧容器中运动）
当鼠标移动到左侧小图盒子的时候我们需要实现鼠标始终在遮罩层中，并且遮罩层会随着鼠标的移动而移动（言外之意：遮罩层的位置和鼠标移动时的坐标息息相关，且不能使它溢出左边容器，计算方法见代码）。

注意：这里有一个潜藏的bug,即当你的界面滚动的时候，遮罩层不会随界面的滚动而移动，当界面向下滚动的时候，鼠标在左侧容器内但却不再在遮罩层区域里，且无法再移动遮罩层。解决办法如下：

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;
}

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