Question

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

当我达到最大变焦时（让我们说第三张图像，高度约为300像素+宽度，宽度比第一幅度高1600像素），然后将自己置于右下角，然后开始缩小：我就是当我看到图像本身变小并给我一个白色的空白空间时，卡在那个角落里，而图像是在那个无法抓取之后（可以这么说）。

但是，如果我然后将.css（{'left'：'0px'，'top'：'0px'}）添加到我正在替换的图像中，我会飞回左上角，我可以拖动所有我想。但显然我想留在我想要放大的地方。

如果我改变（代码中较低的帖子）“遏制：[数据]”到“遏制：”父母“我能够”留在“我放大并缩小的某个区域，但是我当我进入一个角落时，我仍然会得到白色的空白区域（但是我能够再次拖入图片中），并且成本不再是平滑的全景感，更像是它会掠过边缘。 / p>

有什么简单的方法可以解决这个问题吗？这对我的问题是一个很好的解决方案，还是有更好的方法来实现这种东西。我尝试使用.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

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

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

这是demo。

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

  });

});

.draggable（）和更改不同大小的图像的问题

1 个答案: