Question

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

您可以看到我的代码here.

这是我的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>

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

2 个答案: