Question

我希望能够在图像放大后在其容器内移动img，因为单击图像后就可以看到它变得太大而看不到整个图像。另外，如果图像没有悬停，如何使图像恢复正常？预先感谢。

.container {
  width: 800px;
  margin: 0 auto;
  border: 2px solid black;
  display: flex;
}

.img-wrapper {
  margin: 10px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.text {
  width: 40%;
  padding: 20px;
}

.normal-zoom {
  transform: scale(1);
  cursor: zoom-in;
  transition: all 250ms;
}

.zoom-in {
  transform: scale(1.6);
  cursor: zoom-out;
  transition: all 250ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
  </div>
  <p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>

require 'json'
myData = JSON.parse('{"A": {"B": {"C": {"D": "open sesame"}}}}')

def getProperty(index, parsedData)
  return parsedData[parsedData.keys[index]]
end  

myDataFirstProperty = getProperty(0, myData) # => {"B"=>{"C"=>{"D"=>"open sesame"}}}

evenDeeper = getProperty(0, myDataFirstProperty) # => {"C"=>{"D"=>"open sesame"}}

Answer 1

由于您使用transform: scale()来获得缩放效果，因此修改transform-origin来更改鼠标移动时缩放效果的中心点更快，更正确：

// Zoom in/out clothing img
$('.image').click(function() {
  $(this).toggleClass('normal-zoom zoom-in');
});

$('.image').on('mousemove', function(event) {
  // This gives you the position of the image on the page
  var bbox = event.target.getBoundingClientRect();

  // Then we measure how far into the image the mouse is in both x and y directions
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;

  // Then work out how far through the image as a percentage the mouse is
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  // Then we change the `transform-origin` css property on the image to center the zoom effect on the mouse position
  //event.target.style.transformOrigin = xPercent + '% ' + yPercent + '%';
  // It's a bit clearer in jQuery:
  $(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
  // We add the '%' units to make sure the string looks exactly like the css declaration it becomes.

});

// If you want it to automatically trigger on hover
$('.image').on('mouseenter', function() {
  $(this).addClass('zoom-in');
  $(this).removeClass('normal-zoom');
});

// and stop when not hovering
$('.image').on('mouseleave', function() {
  $(this).addClass('normal-zoom');
  $(this).removeClass('zoom-in');
});

.container {
  width: 800px;
  margin: 0 auto;
  border: 2px solid black;
  display: flex;
}

.img-wrapper {
  margin: 10px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}

.text {
  width: 40%;
  padding: 20px;
}

.normal-zoom {
  transform: scale(1);
  cursor: zoom-in;
  transition: transform 250ms;
}

.zoom-in {
  transform: scale(1.6);
  cursor: zoom-out;
  transition: transform 250ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">
  </div>
  <p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p>
</div>

Answer 2

您可以在类.zoom-in上的图像上使用mousemove事件侦听器，以更改左侧和顶部的CSS参数。确保在图像上设置position:relative;。

示例：

$(document).on('mousemove', '.zoom-in', function( event ) {
  $(".text").text(event.pageX + ", " + event.pageY);
  var positionLeft = event.pageX - $(this).width()/2;
  var positionTop = event.pageY - $(this).height()/2;
        $(this).css({'left': positionLeft, 'top': positionTop});
});

这里是fiddle。

用mousemove移动img

2 个答案: