.draggable() 的问题以及更改不同尺寸的图像

Question

我试图在 jQuery 中做一些“缩放”功能（加载更大的图像），同时能够在较小的 div 中拖动图像（.draggable）。但我遇到了一个小问题。

当我达到最大缩放（比方说第三张图片，其高度比第一张图片高约 300 像素+，宽度约 1600 像素+），然后将自己置于右下角，然后开始缩小：然后我就陷入了困境当我看到图像本身变小并给我一个白色的空白空间时，图像就不可拖动了（可以这么说）。

但是，如果我随后将 .css({'left': '0px', 'top': '0px'}) 添加到我要替换的图像中，我会飞回左上角，并且可以随意拖动。但显然我想留在我想要放大的地方。

如果我将（帖子中的代码较低）“遏制：[数据]”更改为“遏制：“父级”，我可以“停留”在我放大和缩小的特定区域，但我仍然得到当我进入角落时会出现白色的空白区域（但我可以再次拖动图片），并且代价是它不再是平滑的全景感觉，更像是卡在边缘上

。解决这个问题的简单方法是什么？无论如何，这对于我的问题来说是一个很好的解决方案，还是有更好的方法来实现这种东西，我已经尝试使用 .animate() 并使一张图片更大，但是在。最后我遇到了同样的问题

  <div id="map"> // 900px in width and 300px in height and Overflow: hidden in css to keep larger images inside

    <img id="map-image" src="images/hogf_zoom0.jpg" /> // same as #map until zoom1.jpg wich is slightly larger

  </div>

  <div id="zoomPanel">

    <a href="#" class="zoomIn">+</a>
    <a href="#" class="zoomOut">-</a>

  </div>

-

  var zoom = 0;
  var maxZoom = 3;

  $('.zoomIn').click(function() {
    if (zoom >= 0 && zoom < maxZoom) {
      zoom++;
      $("#map-image").attr("src", "images/hogf_zoom" + zoom + ".jpg").css({'top': '-0px','left': '0px'});
      if (zoom > 0) { $("#zoomPanel .zoomOut").show(); }
    }
  });

  $('.zoomOut').click(function() {
    if (zoom <= maxZoom && zoom > 0) {
      zoom--;
      $("#map-image").attr("src", "images/hogf_zoom" + zoom + ".jpg").css({'top': '-0px','left': '0px'});

      if (zoom == 0) { $("#zoomPanel .zoomOut").hide(); }
    }
  });

  $('#map img').load(function() {
    var mapWidth = $("#map").width();
    var mapHeight = $("#map").height();
    var imgPos = $("#map-image").offset();
    var mapPos = $("#map").offset();
    var imgWidth = $("#map-image").width();
    var imgHeight = $("#map-image").height();

    var x1 = ((1 + mapWidth) - imgWidth) + mapPos.left;
    var y1 = (11 + mapHeight) - imgHeight;
    var x2 = imgPos.left;
    var y2 = imgPos.top;

    $("#map img").draggable({
      containment: [x1,y1,x2,y2],
      cursor: 'move'
    });

  });

感谢您的任何输入

，演示： http://miyao.eu/zoomzoom/

Answer 1

我花了一点时间，但如果你保存图像的中心位置并将其转换到下一个图像，你会得到相对较好的结果。我还必须检查结果位置以确保它位于视口内。

我将缩放链接更改为按钮，以便更容易点击。

这是一个演示。

$(document).ready(function() {

  var zoom = 0,
    maxZoom = 2,
    last = [],
    $img = $('#map-image'),
    $map = $('#map'),
    map = [$map.offset().left, $map.offset().top, $map.width(), $map.height()],
    getDim = function() {
      var w = $img.width(),
      h = $img.height(),
      x = $img.offset().left - map[0],
      y = $img.offset().top - map[1];
      // save dimensions & calculate % image middle
      return [x, y, w, h, -(x - map[2] / 2) / w, -(y - map[3] / 2) / h];
    };

  $('.zoomIn').click(function(){
    if (zoom >= 0 && zoom < maxZoom) {
      zoom++;
      last = getDim();
      $("#map-image").attr("src", "zoom" + zoom + ".jpg");
      if (zoom > 0) {
        $("#zoomPanel .zoomOut").removeAttr('disabled');
      }
      if (zoom === maxZoom) {
        $('#zoomPanel .zoomIn').attr('disabled', 'disabled');
      }
    }
  });

  $('.zoomOut').click(function(){
    if (zoom <= maxZoom && zoom > 0) {
      zoom--;
      last = getDim();
      $("#map-image").attr("src", "zoom" + zoom + ".jpg");
      if (zoom === 0) {
        $("#zoomPanel .zoomOut").attr('disabled', 'disabled');
      }
    }
    $('#zoomPanel .zoomIn').removeAttr('disabled');
  });

  // Load image and make it panoramable
  $img.load(function(){

    var size = getDim(),
      // calculate new postion from previous center
      x = Math.round(-size[2] * last[4] + map[2] / 2),
      y = Math.round(-size[3] * last[5] + map[3] / 2);

    $img
      .css({
        left: (-x + map[2] > size[2]) ? map[2] - size[2] : (x > 0) ? 0 : x, // check ranges
        top: (-y + map[3] > size[3]) ? map[3] - size[3] : (y > 0) ? 0 : y
      })
      .draggable({
        containment: [map[0] + map[2] - size[2], map[1] + map[3] - size[3], map[0], map[1]],
        cursor: 'move'
      });

  });

});