最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - move img with mousemove - Stack Overflow

programmeradmin2浏览0评论

I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it bees too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.

// Zoom in/out clothing img
  $('.image').click(function() {
    $(this).toggleClass('normal-zoom 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: all 250ms;
}

.zoom-in {
  transform: scale(1.6);
  cursor: zoom-out;
  transition: all 250ms;
}
<script src=".1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src=".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>

I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it bees too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.

// Zoom in/out clothing img
  $('.image').click(function() {
    $(this).toggleClass('normal-zoom 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: all 250ms;
}

.zoom-in {
  transform: scale(1.6);
  cursor: zoom-out;
  transition: all 250ms;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src="https://static1.squarespace./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>

Share Improve this question edited Jun 20, 2019 at 6:37 coagmano 5,6711 gold badge30 silver badges41 bronze badges asked Jul 10, 2018 at 2:47 Gilbert R.Gilbert R. 2922 gold badges8 silver badges20 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

Since you're using transform: scale() for the zoom effect it's faster and more correct to modify transform-origin to change the center point of the zoom effect on mousemove:

// 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 bees.

});

// 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="img-wrapper">
    <img src="https://static1.squarespace./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>

You can use the mousemove event listener on the image with class .zoom-in to change the left and top CSS params. Make sure to set position:relative; on the image.

Example:

$(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});
});

Here is a fiddle.

发布评论

评论列表(0)

  1. 暂无评论