[完整]js实现放大镜效果

进阶的CC

已于 2023-08-23 19:16:01 修改

阅读量226

点赞数

文章标签： javascript 前端

于 2023-08-23 15:31:17 首次发布

本文链接：https://blog.csdn.net/qq_57676486/article/details/132453566

版权

实现：1.小盒子small当鼠标移入，将小img里src赋值给中等框src，将小盒子的src赋值给大盒子的背景

2.大盒子的展示与隐藏,经过大盒子展示大盒子，离开大盒子隐藏大盒子

3.显示隐藏layer(遮罩层)，遮罩层跟随鼠标移动。

核心：pageX获取鼠标位置、getBoundingClientRect获取元素距离窗口距离、document.documentElement.scrollTop减去头部被卷起的部分

遮罩层移动的原理：将鼠标的位置获取之后通过控制鼠标移动，将其赋值给遮罩层 layer.style.top = my + 'px';

背景图片与盒子是1/2 移动大盒子的背景图片跟谁移动,注意：存在关系2倍比例 backgroundPositionX背景图片的位置,注意设置背景比例及移动方向

源码：将图片换一下就可以使用了，需要注意的是盒子的大小都是固定的使用的固定值计算的鼠标位置，使用时更改中盒子大小时需要更改计算鼠标位置的x与y及遮罩层的mx及my

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      margin: 0 auto;
    }

    li {
      list-style: none;
    }

    .box {
      margin-top: 200px;
      position: relative;
    }

    .middle {
      position: relative;
      width: 400px;
      height: 400px;
    }

    .small {
      position: absolute;
      right: 500px;

    }

    img {
      display: block
    }

    .middle img {
      width: 100%;
      height: 100%;
      object-fit: cover;

    }

    .small img {
      width: 50px;
      height: 50px;
    }

    .small li {
      margin-bottom: 5px;
    }


    .active {
      border: 2px solid red;
    }

    .large {
      display: none;
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0px;
      right: 167px;
      background-color: rgb(201, 76, 95);
      background-image: url(../imgs/2.jpg);
      background-size: 800px 800px;
      /* 背景比例 */
    }

    .layer {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: rgb(0, 0, 0);
      opacity: 0.2;
    }
  </style>
</head>

<body>
  <span>
    实现：1.小盒子small当鼠标移入，将小img里src赋值给中等框src，将小盒子的src赋值给大盒子的背景<br>
    2.大盒子的展示与隐藏,经过大盒子展示大盒子，离开大盒子隐藏大盒子<br>
    3.显示隐藏layer(遮罩层)，遮罩层跟随鼠标移动。<br>
    核心：pageX获取鼠标位置、getBoundingClientRect获取元素距离窗口距离、document.documentElement.scrollTop减去头部被卷起的部分<br>
    遮罩层移动的原理：将鼠标的位置获取之后通过控制鼠标移动，将其赋值给遮罩层 layer.style.top = my + 'px';<br>
    背景图片与盒子是1/2 移动大盒子的背景图片跟谁移动,注意：存在关系2倍比例 backgroundPositionX背景图片的位置,注意设置背景比例及移动方向

  </span>
  <div class="box">
    <div class="small">
      <ul>
        <li class="active"><img src="../imgs/2.jpg" alt=""></li>
        <li><img src="../imgs/1.jpg" alt=""></li>
        <li><img src="../imgs/3.jpg" alt=""></li>
        <li><img src="../imgs/tx.jpg" alt=""></li>
      </ul>
    </div>
    <div class="middle">
      <!-- js获取图片获取src 使用一个其他的使用切换获取src重新赋值获取-->
      <img src="../imgs/2.jpg" alt="">
      <!-- <ul>
        <li><img src="../imgs/2.jpg" alt=""></li>
        <li><img src="../imgs/1.jpg" alt=""></li>
        <li><img src="../imgs/3.jpg" alt=""></li>
        <li><img src="../imgs/tx.jpg" alt=""></li>
      </ul> -->
      <div class="layer"></div>
    </div>
    <div class="large"></div>

  </div>
  <script>
    let small = document.querySelector('.small')
    let middle = document.querySelector('.middle')
    let large = document.querySelector('.large')
    let layer = document.querySelector('.layer')

    //冒泡获取src将中等框的地址改成获取的src,mouseover有冒泡
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {

        //如何获取元素的属性src
        // console.log(e.target.src);
        // 排他
        document.querySelector('.active').classList.remove('active');
        e.target.classList.add('active');
        //将小img里src赋值给中等框src
        middle.querySelector('img').src = e.target.src;
        //将小盒子的src赋值给大盒子 需要给第一个背景到达替换背景的效果
        large.style.backgroundImage = `url(${e.target.src})`
      }
    })

    //3.大盒子的展示与隐藏
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)
    let hideL = null;
    function show() {
      large.style.display = 'block';
      clearTimeout(hideL);//在相反的一件事中调用定时器和另一个清除定时器
    }
    function hide() {
      hideL = setTimeout(function () {
        large.style.display = 'none';
      }, 200)
    }

    //4.经过大盒子展示大盒子，离开大盒子隐藏大盒子
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)
    //将小盒子的src赋值给大盒子

    //5.显示隐藏layer
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block';
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none';

    })

    //6.遮罩层跟随鼠标移动
    middle.addEventListener('mousemove', function (e) {

      //获取鼠标在middle框中的坐标
      // console.log(e.pageX, e.pageY); middle.getBoundingClientRect().top有时候出错？？
      // console.log(middle.getBoundingClientRect().left, middle.getBoundingClientRect().top);
      //鼠标在middle坐标=鼠标的坐标-middle的坐标
      let x = e.pageX - middle.getBoundingClientRect().left;
      let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop;
      // console.log(x, y);
      // layer.style.left = x + 'px';
      // layer.style.top = y + 'px';
      //6.3控制黑色遮罩层的位置移动距离  x水平移动
      let mx = 0; my = 0;
      if (x <= 100) mx = 0;//小于100时订在最边上
      if (x > 100 && x <= 300) mx = x - 100;//-100是为了防止突然弹走
      if (x > 300) mx = 200;//将大于时定在中间
      layer.style.left = mx + 'px';
      // layer.style.top = y + 'px';
      //垂直方向
      if (y > 100 && y <= 300) my = y - 100;//-100是为了防止突然弹走
      if (y > 300) my = 200;//将大于时定在中间
      layer.style.top = my + 'px';
      // 7.背景图片与盒子是1/2 移动大盒子的背景图片跟谁移动
      // 注意：存在关系2倍比例 backgroundPositionX背景图片的位置
      large.style.backgroundPositionX = -2 * mx + 'px';
      large.style.backgroundPositionY = -2 * my + 'px';
    })


  </script>
</body>

</html>

进阶的CC

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[完整]js实现放大镜效果

源码：将图片换一下就可以使用了，需要注意的是盒子的大小都是固定的使用的固定值计算的鼠标位置，使用时更改中盒子大小时需要更改计算鼠标位置的x与y及遮罩层的mx及my。遮罩层移动的原理：将鼠标的位置获取之后通过控制鼠标移动，将其赋值给遮罩层 layer.style.top = my + 'px';实现：1.小盒子small当鼠标移入，将小img里src赋值给中等框src，将小盒子的src赋值给大盒子的背景2.大盒子的展示与隐藏,经过大盒子展示大盒子，离开大盒子隐藏大盒子
复制链接

扫一扫