商品大图展示效果

最新推荐文章于 2024-09-23 22:17:25 发布

insgo

最新推荐文章于 2024-09-23 22:17:25 发布

阅读量181

点赞数

文章标签： html js css

本文链接：https://blog.csdn.net/insgo/article/details/107444200

版权

<div class="shopping clearfix">
    <div class="dragFather ">
      <div class="dragBox"></div>
      <img class="smallImg" src="../../images/lm.jpg" alt="">
      <div class="big">
        <img class="bigImg" src="../../images/lm.jpg" alt="">
      </div>
    </div>

* {
  margin: 0;
  padding: 0
}

.shopping {
  margin: 100px;
}

.clearfix::after {
  content: '.';
  visibility: hidden;
  clear: both;
  display: block;
  height: 0;
}

.dragFather {

  width: 500px;
  position: relative;
  float: left;
}

.dragBox {
  pointer-events: none;
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(243, 227, 155, .3);
  display: none;
}

.smallImg {
  width: 500px;
}

.big {
  position: absolute;
  left: 500px;
  top: 0px;
  width: 600px;
  height: 600px;
  display: none;
  z-index: 999;
  border: 1px solid #ccc;
  overflow: hidden;
}

.bigImg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1500px;
}

   var dragBox = document.querySelector('.dragBox')
    var smallImg = document.querySelector('.smallImg')
    var big = document.querySelector('.big')
    var dragFather = document.querySelector('.dragFather')
    var bigImg = document.querySelector('.bigImg')
    var canDrag = false
    smallImg.addEventListener('mouseenter', function () {
      canDrag = true
      dragBox.style.display = 'block'
      big.style.display = 'block'
      document.addEventListener('mousemove', drag)
    })
    smallImg.addEventListener('mouseout', function () {
      dragBox.style.display = 'none'
      big.style.display = 'none'
      document.removeEventListener('mousemove', drag)
    })


    function drag(e) {
      if (canDrag) {
        var x = e.pageX - dragFather.offsetLeft - dragBox.offsetWidth / 2
        var y = e.pageY - dragFather.offsetTop - dragBox.offsetHeight / 2
        var outX = smallImg.offsetWidth - dragBox.offsetWidth
        var outY = smallImg.offsetHeight - dragBox.offsetHeight
        if (x < 0) {
          x = 0
        } else if (x > outX) {
          x = outX
        }
        if (y < 0) {
          y = 0
        } else if (y > outY) {
          y = outY
        }
        dragBox.style.left = x + 'px'
        dragBox.style.top = y + 'px'
        var bigX = x / smallImg.offsetWidth * bigImg.offsetWidth
        var bigY = y / smallImg.offsetHeight * bigImg.offsetHeight
        bigX = bigX > bigImg.offsetWidth - big.offsetWidth ? bigImg.offsetWidth - big.offsetWidth : bigX
        bigY = bigY > bigImg.offsetHeight - big.offsetHeight ? bigImg.offsetHeight - big.offsetHeight : bigY
        bigImg.style.top = -bigY + 'px'
        bigImg.style.left = -bigX + 'px'
      }
    }