仿京东的图片放大镜案例

一、目标实现效果

在左边的小图片上实现鼠标经过右边显示图片的放大图片

二、实现过程及其思路展示

1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示（页面加载时这两个为none也就是隐藏的状态），再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none，再次隐藏起来。

2、鼠标添加'mousemove'事件，再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动，而且需要在此时给右边的被放大的盒子添加位置（但是左右两边的位移是相反的，需要特别注意，只需要给鼠标产生位移的距离添加'-'号就行了）。

3、实现的过程中还有很多的小细节，由于我不是大神，所以说不能面面俱到，所以直接上代码，可以在实践中寻找经验，体验代码之美。

代码如下：

1、js代码段，此处需要单独创建一个js文件，并且调用到html的head中（由于还是小白阶段，所以暂时没有写注释，有不懂的可以私信问我，虽然那我也不一定会哈哈哈哈）

window.addEventListener('load', function () {
    var mask = this.document.querySelector('.mask');
    var bigImg = this.document.querySelector('.big_img');
    var smallImg = this.document.querySelector('.small_img');
    var magnifier = this.document.querySelector('.magnifier');
    var imgLeft = this.document.querySelector('#small');
    var imgRight = this.document.querySelector('#big');

    magnifier.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        bigImg.style.display = 'block';
        smallImg.addEventListener('mousemove', function (e) {
            var x = e.pageX - smallImg.offsetLeft;
            var y = e.pageY - smallImg.offsetTop;
            var maskLeft = x - mask.offsetWidth / 2;
            var maskTop = y - mask.offsetHeight / 2;
            // 此处忘记给smallImg的源对象添加宽度和高度，导致遮罩层显示出现错误
            var ssTop = smallImg.offsetWidth - mask.offsetWidth;
            if (maskLeft <= 0) {
                mask.style.left = '0';
            }
            else {
                mask.style.left = maskLeft + 'px';
            }
            if (maskTop <= 0) {
                mask.style.top = '0';
            }
            else {
                mask.style.top = maskTop + 'px';
            }
            if (maskTop >= ssTop) {
                mask.style.top = ssTop + 'px';
            }
            if (maskLeft >= ssTop) {
                mask.style.left = ssTop + 'px';
            }
            // 定义一个倍数关系，联系到与被放大的图像
            var bb = imgRight.offsetWidth / imgLeft.offsetWidth;
            imgRight.style.top = -bb * maskTop + 'px';
            imgRight.style.left = -bb * maskLeft + 'px';
        });
    })
    magnifier.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        bigImg.style.display = 'none';
    })








})

2、html页面，由于html的页面较为简便，所以说是将css文件也写到了这里（同样没有注释哦）

3、用到的两张图片是在京东的官网上抠出来的（你们也可以去扒几张）

4、html中需要改一下路径根据你所创建的文件地址直接修改就行了。

5、小白想学前端的话建议去看一下黑马的课程哦，我这是在黑马白嫖的pink老师的课嘻嘻嘻。