原生JS实现鼠标移入预览放大主图

最新推荐文章于 2022-09-15 09:03:19 发布

benlalagang

最新推荐文章于 2022-09-15 09:03:19 发布

阅读量712

点赞数 2

分类专栏：案例

本文链接：https://blog.csdn.net/benlalagang/article/details/125516542

版权

javascript

案例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS：

#box{
      margin-left: 40px;
      position: relative;
      margin-bottom: 200px;
    }
    .small{
      width: 400px;
      height: 400px;
      overflow: hidden;
      border: 1px solid slateblue;
      position: relative;
      cursor: move;
    }
    .mask{
      position: absolute;
      width: 260px;
      height: 260px;
      background: rgba(147,74,69,0.4);
      left: 0;
      top: 0;
      display: none;
    }
    .big{
      display: none;
      width: 500px;
      height: 500px;
      overflow: hidden;
      border: 1px solid slateblue;
      position: absolute;
      left: 420px;
      top: 0px;
    }
    .big img{
      position: absolute;
      top: 0;
      left: 0;
      width: 800px;
    }

HTML

<div class="box" id="box">
  <div class="small"><!--小层-->
    <img src="http://www.wsg3096.com/pic/erjian12-3.jpg" width="400" alt=""/><!--小图-->
    <div class="mask"></div><!--遮挡层-->
  </div>
  <div class="http://www.wsg3096.com/pic/erjian12-3.jpg"><!--大层-->
    <img src="anlitexun.jpg" alt=""/><!--大图-->
  </div>
</div>

let small = document.querySelector('.small'),
      mask = document.querySelector('.mask'),
      box = document.querySelector('#box'),
      big = document.querySelector('.big'),
      img = document.querySelector('.big img');

  small.addEventListener('mouseover',function () {
      mask.style.display = 'block'
      big.style.display = 'block'
      small.addEventListener('mousemove',moveSmall)
      function moveSmall(e) {
        let changY = e.pageY - small.offsetTop - box.offsetTop,
            changX = e.pageX - small.offsetLeft - box.offsetLeft,
            maskT = (changY - (mask.offsetHeight / 2)),
            maskL = (changX - (mask.offsetWidth / 2)),
            max = small.offsetHeight - mask.offsetWidth,
            min = img.offsetHeight - big.offsetWidth;
        if (maskL < 0){maskL = 0}
        if (maskT < 0){maskT = 0}
        if (maskT > max){maskT = max}
        if (maskL > max){maskL = max}

        mask.style.top = maskT + 'px'
        mask.style.left = maskL + 'px'

        // 图片的最大移动距离
        let bbg = (maskL * min) / max, // 虽然他是正方形 但还是要宽高都写 因为只有一个移动宽度 高度也会变  45度来回变化
            bbj = (maskT * min) / max;
        img.style.top = -bbj + 'px'
        img.style.left = -bbg + 'px'

      }
  })

  small.addEventListener('mouseout',function () {
    mask.style.display = 'none'
    big.style.display = 'none'
  })