Js原生放大镜效果

最新推荐文章于 2024-06-15 21:20:00 发布

高shan仰止

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量81

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/gaoshanyz/article/details/109377908

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  img {
    display: block;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 350px;
    height: 350px;
    margin: 100px;
    border: 1px solid #ccc;
    position: relative;
  }

  .big {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 360px;
    overflow: hidden;
    display: none;
    /* border: solid 2px pink */
  }

  .big img {
    position: absolute;

  }

  /* .small {
    position: relative;
  } */

  .mask {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 0, 0.4);
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: move;
    display: none;
  }
</style>

<body>
  <div class="box" id="box">
    <div class="small" id="small">
      <img src="pic/small.jpg" width="350" alt="" />
      <div class="mask" id="mask"></div>
    </div>
    <div class="big" id="big">
      <img src="pic/big.jpg" width="800" alt="" id="img" />
    </div>
  </div>
</body>
<script>
  // 1获取节点
  let boxObj = document.getElementById('box');
  let smallObj = document.getElementById('small');
  let maskObj = document.getElementById('mask');
  let bigObj = document.getElementById('big');
  let bigImg = document.getElementById('img')

  // 2鼠标移入smallObj显示mask和bigObj
  smallObj.onmouseenter = function () {
    maskObj.style.display = 'block';
    bigObj.style.display = 'block';
  }
  // 3 鼠标移出则隐藏
  smallObj.onmouseleave = function () {
    maskObj.style.display = 'none';
    bigObj.style.display = 'none';
  }
  // 获取box的left和top值
  let boxLeft = boxObj.offsetLeft;
  let boxTop = boxObj.offsetTop;
  // 4.给small绑定鼠标移动事件，让mask移动
  smallObj.onmousemove = function (eve) {
    // 4-1 获取鼠标实时位置
    let mouseX = eve.pageX;
    let mouseY = eve.pageY;

    // 4-2 计算出mask的位置
    let maskPosX = mouseX - boxLeft - maskObj.offsetWidth / 2;
    let maskPosY = mouseY - boxTop - maskObj.offsetHeight / 2;

    // 4-3 边界的设置
    if (maskPosX < 0) maskPosX = 0;
    if (maskPosY < 0) maskPosY = 0;
    // 右边界和下边界的设置(最大移动距离)
    let maskTargetX = smallObj.offsetWidth - maskObj.offsetWidth;
    let maskTargetY = smallObj.offsetHeight - maskObj.offsetHeight;
    if (maskPosX > maskTargetX) maskPosX = maskTargetX;
    if (maskPosY > maskTargetY) maskPosY = maskTargetY;

    // 4-4设置小黄块的位置
    maskObj.style.left = maskPosX + 'px';
    maskObj.style.top = maskPosY + 'px';

    // 4-5 设置大图的位置 跟随小黄块移动
    //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
    //mask移动距离 / mask移动的最大距离 == img移动距离 /img移动的最大距离
    // 由此可得：
    //img移动距离 = mask移动距离 / mask移动的最大距离 * img移动的最大距离

    // 4-5-1计算大图移动的最大边界值
    let imgTargetX = bigImg.offsetWidth - bigObj.offsetWidth;
    let imgTargetY = bigImg.offsetHeight - bigObj.offsetHeight;

    // 计算大图根据鼠标移动的位置
    let imgPosX = maskPosX / maskTargetX * imgTargetX;
    let imgPosY = maskPosY / maskTargetY * imgTargetY;
    //大图移动方向和小黄块方向相反 所以给负值
    bigImg.style.left = -imgPosX + 'px';
    bigImg.style.top = -imgPosY + 'px';

  }

</script>

</html>

高shan仰止

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js原生放大镜效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> img { display:
复制链接

扫一扫