Question

我想使用transform: scale()作为缩放功能。但是我还需要通过移动鼠标光标来更改缩放位置。如果缩放区域与图像一样大，那将是最好的。

某些代码：

$(document).ready(function() {
  $('img').hover(function() {
    $("img").addClass('zoom');

  }, function() {
    $("img").removeClass('zoom');
  });
});

.image_area {
  width: 50vw;
  height: 50h;
  overflow: hidden;
}

.img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.zoom {
  transition: 0.1s transform linear;
  transform: scale(5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image_area">
  <img id="content" src="https://i.pinimg.com/originals/51/78/75/51787599df00f30466df5a0ba8da9463.jpg">
</div>

因此，一般来说，这里缺少什么：通过移动光标来更改缩放位置！

非常感谢您的帮助！：）

Answer 1

html

<div class="zoom" onmousemove="imageZoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</div>

css

div.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
div.zoom img:hover {
  opacity: 0;
}
div.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

JS

function imageZoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

更新：这是您的code

使用“ transform：scale（）”作为缩放功能，添加定位

1 个答案: