1

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

当我达到最大缩放时（比如说第三张图像，它的高度大约为 300px+，宽度为 1600px+），然后将自己放在右下角，然后开始缩小：然后我被困在了那个角落，而我看到图像本身变小并给我一个白色的空白空间，并且图像在那之后是不可拖动的（可以这么说）。

但是，如果我随后将 .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/

4

1 回答 1

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'
      });

  });

});
于 2011-04-06T17:08:49.917 回答