29 仿京东放大镜案例

欢迎关注我的微信公众号：CurryCoder的程序人生

1.仿京东放大镜案例

具体效果

功能需求：

鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，鼠标一离开隐藏2个盒子功能

// 当页面全部加载完毕，因此需要load，执行里面的js代码
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";
  });
};

黄色的遮挡层跟随鼠标功能

把鼠标的坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准；
首先是获得鼠标在盒子中的坐标；
之后把数值赋值给遮挡层作为left和top值；
此时使用到鼠标移动事件，但是还是在小图片盒子内移动；
发现，遮挡层中鼠标的位置不对，需要再减去盒子自身高度和宽度的一半；
遮挡层不能超出小图片盒子的范围；
如果mask.style.left和mask.style.top小于等于0，就把坐标设置为0；
如果mask.style.left和mask.style.top大于等于preview_img.offsetWidth - mask.offsetWidth，就把坐标设置为最大的移动距离即小图片盒子宽度减去遮挡层盒子宽度；

    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener("mousemove", function(e) {
    // (1). 先计算出鼠标在盒子内的坐标
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    // console.log(x, y);
    // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
    // (3) 我们mask 移动的距离
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 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";

大图移动距离计算

2.资料下载

笔记及代码，欢迎star,follow,fork......

最后编辑于：2020.06.06 15:56:47