js实现图片放大镜效果

最新推荐文章于 2024-07-10 10:06:23 发布

weixin_49696014

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量347

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_49696014/article/details/122386999

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px 0 0 50px;
      border: 1px solid #ccc;
    }
    .bigbox{
      position: absolute;
      top: 0;
      left: 310px;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }
    .bigbox img{
      position: absolute;
    }
    .smallbox{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .smallbox .mask{
      position: absolute;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 0, 0.4);
      left: 0;
      top: 0;
      cursor:move;
      display: none;
    }
    .smallbox img{
      width: 100%;
      height: 100%;
    }
    
  </style>
</head>
<body>
  <div class="box">
    <!-- 小图片加遮罩层 -->
    <div class="smallbox">
      <img src="./images/001.jpg" alt="">
      <div class="mask"></div>
    </div>
    <div class="bigbox">
      <img src="./images/0001.jpg" alt="">
    </div>
  </div>
  <script>
    // 获取元素
    var box = document.querySelector('.box')
    var smallbox = document.querySelector('.smallbox')
    var mask = document.querySelector('.mask')
    var bigbox = document.querySelector('.bigbox')
    var bigimage = bigbox.children[0]
    // 鼠标经过smallbox盒子，遮罩层和放大图显示
    smallbox.addEventListener('mouseover',function(){
      mask.style.display = 'block'
      bigbox.style.display = 'block'
    })
    // 鼠标离开smallbox，隐藏盒子
    smallbox.addEventListener('mouseout',function(){
      mask.style.display = 'none'
      bigbox.style.display = 'none'
    })
    // 鼠标在smallbox盒子中移动时，遮罩层要跟随鼠标移动
    smallbox.addEventListener('mousemove',function(event){
      var e = event || window.event
      // 1、计算出鼠标在页面中的坐标
      var pageX = page(e).page_x
      var pageY = page(e).page_y
      // 2、计算出鼠标在盒子内的坐标
      var boxX = pageX - box.offsetLeft
      var boxY = pageY - box.offsetTop
      // 3、计算出遮罩层的坐标
      var maskX = boxX - mask.offsetWidth / 2
      var maskY = boxY - mask.offsetHeight / 2
      // 3.5 要判断mask坐标的值，限制遮罩层的活动范围
      if(maskX <=0){
        maskX = 0
      }
      if(maskX >= (smallbox.offsetWidth - mask.offsetWidth)){
        maskX = smallbox.offsetWidth - mask.offsetWidth
      }
      if(maskY <= 0){
        maskY = 0
      }
      if(maskY >= (smallbox.offsetHeight - mask.offsetHeight)){
        maskY = smallbox.offsetHeight - mask.offsetHeight
      }
      // 4、给遮罩层赋值
      mask.style.left = maskX + 'px'
      mask.style.top = maskY + 'px'

      // 5、计算大图移动的比例
      // 遮罩可以移动的总距离/遮罩当前的移动的距离 = 大图可以移动的总距离/大图当前移动的距离
      /**
       * 大图当前移动距离 = 遮罩当前的移动的距离 * 大图可以移动的总距离 / 遮罩可以移动的总距离
      */
      // 1、大图可以移动的总距离 X方向
      var bigimageLeader_x = bigimage.offsetWidth - bigbox.offsetWidth
      // 2、遮罩可以移动的总距离
      var maskLeader_x = smallbox.offsetWidth - mask.offsetWidth
      // 3、当前遮罩层移动的位置
      bigimage.style.left = -maskX * bigimageLeader_x / maskLeader_x + 'px'

      // 4、大图可以移动的总距离 Y方向
      var bigimageLeader_y = bigimage.offsetHeight - bigbox.offsetHeight
      // 5、遮罩可以移动的总距离
      var maskLeader_y = smallbox.offsetHeight - mask.offsetHeight
      // 6、当前遮罩层移动的位置
      bigimage.style.top = -maskY * bigimageLeader_y / maskLeader_y + 'px'
    })

    // 封装获取鼠标在页面中的坐标
    function page(event){
      return{
        page_x: event.pageX || event.clientX + scroll().scroll_x,
        page_y: event.pageY || event.clientY + scroll().scroll_y
      }
    }

    // 封装页面被卷去的距离
    function scroll(){
      return {
        scroll_x: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        scroll_y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      }
    }
  </script>
</body>
</html>