利用js写出的放大镜效果

利用JavaScript写出放大镜效果（素材由pink老师 黑马程序猿提供）

在一些购物网站上购买一些物品时可以对物品进行放大观看物品，提高用户体验，那么接下来就谈一下如何利用js写出放大镜的效果

首先理清思路，当鼠标移动到晓得图片中，就会出现放大镜效果，随着鼠标的移动，放大镜中的图片也随之移动，所以有三种鼠标事件 onmouseover（鼠标滑过）、 onmouseout（鼠标离开）和onmousemove（鼠标移动）

当鼠标滑过时，放大镜效果出现，当鼠标离开时，放大镜效果消失

html

<div class="preview_wrap fl">
                <div class="preview_img">
                    <img src="upload/ph_02.png" alt="#"/>
                    <div class="mask"></div>
                    <div class="big"><img src="upload/big.jpg" alt="#" class="bigImg"/></div>
                </div>
<div/>

鼠标滑过效果

 var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //当鼠标经过 preview_img 就显示隐藏 mask 和 big
    preview_img.addEventListener('mouseover',function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout',function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });

黄色得到遮挡层要跟随鼠标移动：
把鼠标的坐标赋值给黄色的盒子：黄色盒子有定位，要以父盒子为起始坐标，所以要把鼠标在盒子内的坐标赋值给盒子。
获取鼠标在盒子内的坐标要利用鼠标在整个页面的left值-父盒子距离页面的lfet值 也就是

var x = e.pageX - this.offsetLeft;//this为父盒子
var y = e.pageY - this.offsetTop;

把鼠标获取的坐标赋值给黄色盒子，不过要注意的是黄色盒子的起始坐标为左上角，要想鼠标在盒子中间移动，需要让盒子向上向左走高度与宽度的一半即可

 var maskX = x - this.offsetWidth / 2;
 var maskY = y - this.offsetWidth / 2;

到这里会出现这样的问题 我们没有设置黄色盒子的移动范围，所以会移出父盒子，所以还要给黄色盒子设置一个移动范围

var maskMax = preview_img.offsetWidth - mask.offsetWidth;//最大移动距离是父盒子宽度-子盒子宽度
        if(maskX <= 0) {
            maskX = 0;
        }else if(maskX >= maskMax) {
            maskX = maskMax;
        }
        if(maskY <= 0) {
            maskY = 0;
        }else if(maskY >= maskMax) {
            maskY = maskMax;
        }

最后就可以把鼠标在父盒子里的坐标赋值给黄色盒子

 mask.style.left = maskX  + 'px';
 mask.style.top =  maskY + 'px';

做完黄色盒子移动效果，接下来要让大图片跟随黄色盒子的移动而移动

按照比例移动
大图片的移动距离 = 遮挡层移动距离 * 大图片的最大移动距离 / 遮挡层的最大移动距离

var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;//大图片最大移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';

注意最后黄色盒子移动方向和大图移动方向相反，所以最后赋值要加 ’ - ’ 号

完整js代码

var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    //当鼠标经过 preview_img 就显示隐藏 mask 和 big
    preview_img.addEventListener('mouseover',function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout',function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    //鼠标位置 鼠标距离页面位置-盒子距离页面位置
    preview_img.addEventListener('mousemove',function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x - this.offsetWidth / 2;
        var maskY = y - this.offsetWidth / 2;
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if(maskX <= 0) {
            maskX = 0;
        }else if(maskX >= maskMax) {
            maskX = maskMax;
        }
        if(maskY <= 0) {
            maskY = 0;
        }else if(maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX  + 'px';
        mask.style.top =  maskY + 'px';
        //大图片的移动距离 = 遮挡层移动距离 * 大图片的最大移动距离 / 遮挡层的最大移动距离
       var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
}