jQuery简单制作购物车放大镜效果

最新推荐文章于 2021-05-07 10:04:09 发布

shuffle_boy

最新推荐文章于 2021-05-07 10:04:09 发布

阅读量265

点赞数

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.youkuaiyun.com/shuffle_boy/article/details/111053775

版权

javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

css3

7 篇文章

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./放大镜.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="glass-box">
      <img class="glass-image"
        src="http://p1.meituan.net/200.0/deal/1d22be7df0406ed25b2c7d440ee038d282239.jpg@132_0_536_536a%7C267h_267w_2e_90Q"
        alt="">
      <div class="mask"></div>
    </div>
    <div class="show-image-box">
      <img class="show-image"
        src="http://p1.meituan.net/200.0/deal/1d22be7df0406ed25b2c7d440ee038d282239.jpg@132_0_536_536a%7C267h_267w_2e_90Q"
        alt="">
    </div>
  </div>
</body>

</html>

.wrap {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
  margin: 0 auto;
  display: flex;
}
.wrap .glass-box {
  width: 200px;
  height: 200px;
  border: 1px solid #f00;
  position: relative;
}
.wrap .glass-box .mask {
  width: 80px;
  height: 80px;
  background-color: #0f0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}
.wrap .show-image-box {
  width: 400px;
  height: 400px;
  border: 1px solid #f0f;
  position: relative;
  overflow: hidden;
}
.wrap .show-image-box .show-image {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(5);
  transform-origin: top left;
}

 <script>
    let maxLeft = $('.glass-box').innerWidth() - $('.mask').innerWidth();
    let maxTop = $('.glass-box').innerHeight() - $('.mask').innerHeight();
    $('.mask').mousedown(function (e) {

      let mouseX = e.clientX;
      let mouseY = e.clientY;
      let thisX = $(this).offset().left;
      let thisY = $(this).offset().top;
      $(this).on('mousemove', function (event) {
        console.log(event);
        $(this).offset({
          top: event.clientY - (mouseY - thisY),
          left: event.clientX - (mouseX - thisX)
        });
        
        $(this).position().left < 0 && $(this).css({
          left: 0
        });
        $(this).position().left > maxLeft && $(this).css({
          left: maxLeft
        });
        $(this).position().top < 0 && $(this).css({
          top: 0
        });
        $(this).position().top > maxTop && $(this).css({
          top: maxTop
        });

        $('.show-image').css({
          left: -parseInt($('.mask').css('left')) * 5
        })
        $('.show-image').css({
          top: -parseInt($('.mask').css('top')) * 5
        })

      })
    })
    $(document).mouseup(function () {
      $('.mask').off('mousemove')
    })
    $(document).on('dragstart', () => false)
  </script>