仿京东产品放大镜 css js制作

 这是一个仿京东商品放大的一个案例，使用css  js制作，接下来让我们一起来看代码吧。

html代码框架：

 css代码：

js代码：

window.addEventListener('load', function() {
    var preview_img = this.document.querySelector('.preview_img');
    var mask = this.document.querySelector('.mask');
    var big = this.document.querySelector('.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 - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 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';
    })
})

基本框架很简单，自己写一下就可以了。

1.先做遮罩层随着鼠标的移动而移动，这个我之前写过步骤。就是获取鼠标在盒子内的坐标，然后把鼠标的坐标给遮罩层就可以了，因为鼠标一直在遮罩层的中心，所以需要减去遮罩层宽度的一半。

2.遮罩层只能在这个小图片盒子中移动，所以我们要给他写出限制范围。x不能小于0，y不能大于这个遮罩层最大移动距离(小图片盒子宽度减去遮罩层宽度)，y坐标也是如此。

3.就是做图片放大，这个小图片和大图片有一个比例关系，就是小图片的移动距离/小图片的最大移动距离=大图片的移动距离/大图片的最大移动距离。利用这个就可以算出小图片移动的时候，大图片移动的距离。