前端放大镜效果

最新推荐文章于 2024-07-25 15:44:34 发布
StXch
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量144
点赞数 4
文章标签： css 前端 javascript html
本文链接：https://blog.csdn.net/StXch/article/details/137472428
版权
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    a {

      text-decoration: none;

    }

    li {

      list-style: none;

    }

    .enlargementEffect {

      width: 350px;

      /* background-color: skyblue; */

      margin: 200px 0 0 320px;

      position: relative;

    }

    .displayImage {

      width: 350px;

      height: 350px;

      background-color: #ffffff;

      position: relative;

    }

    .originalImage {

      width: 100%;

      height: 100%;

      background-image: url(./images/001.avif);

    }

    .yellowImage {

      width: 230px;

      height: 230px;

      background-color: yellow;

      opacity: .4;

      display: none;

      position: absolute;

      top: 0;

      left: 0;

      cursor: move;

    }




    .miniImage {

      width: 350px;

      margin-top: 12px;

    }

    .miniImage ul {

      display: flex;

      justify-content: space-evenly;

      align-items: center;

    }

    .miniImage ul li {

      height: 54px;

    }

    .miniImage ul li img {

      width: 50px;

      height: 50px;

      border: 2px solid #ffffff;

      background-color: #fff;

    }

    .miniImage .active {

      border: 2px solid #e53e41;

    }

    .enlargedImage {

      position: absolute;

      top: 0;

      left: 350px;

      width: 540px;

      height: 540px;

      background-color: #ffffff;

      background-size: 822px 822px;

      display: none;

      /* border: 1px solid #eee; */

    }

  </style>

</head>

<body>

  <div class="enlargementEffect">

    <div class="displayImage">

      <div class="originalImage"></div>

      <div class="yellowImage"></div>

    </div>

    <div class="miniImage">

      <ul>

        <li><img src="./images/001.avif" data-img="1" class="active"></li>

        <li><img src="./images/002.avif" data-img="2"></li>

        <li><img src="./images/003.avif" data-img="3"></li>

        <li><img src="./images/004.avif" data-img="4"></li>

        <li><img src="./images/005.avif" data-img="5"></li>

      </ul>

    </div>

    <div class="enlargedImage"></div>

  </div>



  <script>

    // 获取小图片的父类

    const miniImageUl = document.querySelector('.miniImage ul')

    // 获取展示图片原图

    const originalImage = document.querySelector('.originalImage')

    miniImageUl.addEventListener('mousemove', function(e) {

      if (e.target.tagName === 'IMG') {

        document.querySelector('.miniImage .active').classList.remove('active')

        e.target.classList.add('active')

        originalImage.style.backgroundImage = `url(./images/00${e.target.dataset.img}.avif)`

      }

    })

    // 获取展示图片

    const displayImage = document.querySelector('.displayImage')

    // 获取黄色透明图片

    const yellowImage = document.querySelector('.yellowImage')

    // 获取放大图片

    const enlargedImage = document.querySelector('.enlargedImage')

    // 鼠标移入展示图片事件监听

    displayImage.addEventListener('mouseenter', function() {

      yellowImage.style.display = 'block'

      enlargedImage.style.display = 'block'

    })

    // 鼠标移出展示图片事件监听

    displayImage.addEventListener('mouseleave', function() {

      yellowImage.style.display = 'none'

      enlargedImage.style.display = 'none'

    })

    // 鼠标在展示图片里移动事件监听

    displayImage.addEventListener('mousemove', function(e) {

      // console.log(yellowImage.offsetWidth / 2)

      // 拿到鼠标距离原图盒子的距离

      let leftPx = e.pageX - displayImage.getBoundingClientRect().left - document.documentElement.scrollLeft

      let topPx = e.pageY - displayImage.getBoundingClientRect().top - document.documentElement.scrollTop

      // 声明鼠标要移动距离

      let moveX = 0, moveY = 0

      if (leftPx < yellowImage.offsetWidth / 2) moveX = 0

      if (leftPx >= yellowImage.offsetWidth / 2 && leftPx <= displayImage.offsetWidth - yellowImage.offsetWidth / 2) moveX = leftPx - yellowImage.offsetWidth / 2

      if (leftPx > displayImage.offsetWidth - yellowImage.offsetWidth / 2) moveX = displayImage.offsetWidth - yellowImage.offsetWidth



      if (topPx < yellowImage.offsetHeight / 2) moveY = 0

      if (topPx >= yellowImage.offsetHeight / 2 && topPx <= displayImage.offsetHeight - yellowImage.offsetHeight / 2) moveY = topPx - yellowImage.offsetHeight / 2

      if (topPx > displayImage.offsetHeight - yellowImage.offsetHeight / 2) moveY = displayImage.offsetHeight - yellowImage.offsetHeight



      yellowImage.style.left = moveX + 'px'

      yellowImage.style.top = moveY + 'px'

      // 放大效果

      enlargedImage.style.backgroundImage = `url(./images/00${document.querySelector('.miniImage .active').dataset.img}.avif)`

      enlargedImage.style.backgroundPosition = `-${moveX * (54 / 23)}px -${moveY * (54 / 23)}px`

    })

  </script>

</body>

</html>