JS特效实现放大镜效果1

1.写一个获取鼠标焦点并计算鼠标当前位置并显示在盒子里的铺垫

magnifier_box.onmousemove = function (event) {
  var event = event || window.event;
  // 获取鼠标在页面中的坐标
  var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
  var pageY = event.pageY || event.clientX + document.documentElement.scrollTop;
  // 获取鼠标在盒子中的坐标
  var boxX = pageX - magnifier_box.offsetLeft;
  var boxY = pageY - magnifier_box.offsetTop;
  magnifier_box.innerHTML = boxX + "————" + boxY;
}

2.需要用到的一个小公式

3.代码

实现效果

HTML

 <!-- 放大镜效果S -->
    <h3>放大镜效果</h3>
    <div id="magnifier_box">
      <div class="small" id="smallBox">
        <img src="./img/11.jpg" alt="" width="350">
        <div class="mask" id="mask"></div>
      </div>
      <div class="big" id="bigBox" display="none">
        <img src="./img/111.jpg" alt="">
      </div>
    </div>
    <!-- 放大镜效果E -->

css

/* 放大镜效果S */
#magnifier_box {
  width: 350px;
  height: 350px;
  margin: 100px;
  border: 1px solid #ccc;
  position: relative;
}

#magnifier_box img {
  position: absolute;
  vertical-align: top;
}

.small {
  position: relative;
}

.mask {
  width: 175px;
  height: 175px;
  background-color: rgba(255, 255, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
}

.big {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 360px;
  border: 1px solid #ccc;
}
/* 放大镜效果E */

JS

// 放大镜效果S
var magnifier_box = document.getElementById("magnifier_box");
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
var mask = document.getElementById("mask");
var bigImg = document.getElementById("bigImg");
// 鼠标经过显示遮罩和盒子
// smallBox.onmousemove = function () {
//   mask.style.display = "block";
//   bigBox.style.display = "block";
//   console.log("hi");
// };
// 动态获取遮罩坐标，让黄色遮罩跟着移动
smallBox.onmousemove = function (event) {
  mask.style.display = "block";
  bigBox.style.display = "block";
  var event = event || window.event;
  // 获取鼠标在页面的坐标
  var pageX =
    event.pageX || event.clientX + document.documentElement.scrollLeft;
  var pageY = event.pageY || event.clientX + document.documentElement.scrollTop;
  // 获取鼠标在盒子中的坐标，不能使用smallBox的offsetLeft，其设置了position，父元素为box 他俩重合了，offsetLeft是0
  var boxX = pageX - magnifier_box.offsetLeft;
  var boxY = pageY - magnifier_box.offsetTop;
  // 计算mask坐标
  var maskX = boxX - mask.offsetWidth / 2;
  var maskY = boxY - mask.offsetHeight / 2;
  // 限制遮罩得运动范围
  if (maskX < 0) {
    maskX = 0;
  }
  if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
    maskX = smallBox.offsetWidth - mask.offsetWidth;
  }
  if (maskY < 0) {
    maskY = 0;
  }
  if (maskY > smallBox.offsetWidth - mask.offsetWidth) {
    maskY = smallBox.offsetWidth - mask.offsetWidth;
  }
  // 设置mask坐标
  mask.style.left = maskX + "px";
  mask.style.top = maskY + "px";


  // 按照比例移动大图
  var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
  var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
  var rate = bigToMove / maskToMove;
  bigImg.style.left = -rate * maskX + "px";
};
// 鼠标离开后隐藏
smallBox.onmouseout = function () {
  mask.style.display = "none";
  bigBox.style.display = "none";
};
// 放大镜效果E