如何根据JQuery UI范围幻灯片值缩放图像？

Question

我正在尝试根据JQuery UI滑块的值来放大和缩小图像。 我有两个问题，一个是在放大和缩小图像时都需要居中。 第二，有时图像应缩小，而应放大。 这可能与所涉及的数学有关，但是我该如何解决呢？

您可以在这里看到我的代码。

这是我的HTML：

<div class="zoom-me">
   <img src="http://theartmad.com/wp-content/uploads/Happy-Fairy-Tail-Wallpaper-5.jpg">
  </div>
</div>  
<div id="range5"></div>

这是我的CSS：

img {
   position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
  width:200%;

}
.zoom-me {
  background-color: blue;
    overflow: hidden;
    border: 10px solid white;
    max-width: 400px;
    width: 400px;
    position: relative; 
    display: block;
    margin: 0 auto; 
    height: 260px;
}
#range5 {
  position: absolute;
  width: 300px;
  top: 75%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0;
  height: 13px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #e6e7e8;
  outline: none;
}
#range5 .ui-slider-handle{
  position: absolute;
  margin: -18px 0 0 -9px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #0B5788;
  border: 0;
  height: 20px;
  width: 11px;
  outline: none;
  cursor: pointer;
}
#range5 .ui-slider-range{
  background: #0d78bd;
  height: 13px; 
}

这是我的JS：

$('#range5').slider({
    range: 'min',
    max: 500,
    step: 100,
    value: 50,
    slide: function (e, ui) {
        var cv = $('#range5').slider( "value" );
      $('img').animate({
       width: 200 - cv/5 + "%",
       height: 200 - cv/5 + "%"},500);

    } 
});

Answer 1

由于以下几行，您的图片会缩小，而不是放大：

width: 200 - cv/5 + "%",
height: 200 - cv/5 + "%"},500);

滑块的最大值：

max: 500,

表示cv永远不会大于500。500除以5为100。200减去100为100，因此，此数学计算得出的最大缩放比例为100％。

保持图像居中将涉及一些CSS魔术（难以解决，更清晰），或者还需要对图像的位置进行动画处理（轻松自如）。

Answer 2

https://github.com/timmywil/jquery.panzoom这里是工作演示https://timmywil.github.io/jquery.panzoom/demo/

<section id="panzoom-section">
      <div class="parent">
        <div class="panzoom">
          <img src="image-src" width="900" height="900">
        </div>
      </div>
      <div class="buttons">
        <input type="range" class="zoom-range">
      </div>
      <script>
        (function() {
          var $section = $('#panzoom-section');
          $section.find('.panzoom').panzoom({
            $zoomRange: $section.find(".zoom-range"),
          });
        })();
      </script>
</section>