放大镜效果

品优购项目之详情页放大镜效果

大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离。

// 手机详情页面
window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big')
    // 1.鼠标移入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';
    })
    // 2.鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // 1).先计算出鼠标在盒子内的坐标
        // 盒子是相对定位，鼠标是相对于盒子内距离进行定位的
        // 所以先算出鼠标在页面中的距离，再减去盒子距离左侧的距离就是鼠标在盒子内的距离
        // 如果这个盒子的父亲有定位，则是相对于盒子父亲的距离，如果没有就是相对于页面的距离
        // 鼠标的坐标减去盒子距离页面的坐标就是鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 2).盒子高度的一半是150,就是最终mask的left和top值了
        // 3).我们mask移动的距离
        var maskX= x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetTop / 2;
        // 4).如果x坐标小于0，就让他停在0的位置
        // 遮挡层的最大移动距离
        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';
        // 3.大图片的移动距离 = 遮挡层移动距离 * 大图片移动距离 / 遮挡层的最大移动距离
        // 大图片
        var bigImg = document.querySelector('.bigImg')
        // 大图片的最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;

        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})