1

小さいdivの画像（.draggable）をドラッグできるようにしながら、jQueryで「ズーム」機能（大きい画像をロード）を実行しようとしています。しかし、私はわずかな問題にぶつかりました。

最大ズーム（最初の画像よりも高さが約300px +、幅が1600px +の3番目の画像）に到達し、右下隅に移動してズームアウトを開始すると、その状態に陥ります。画像自体が小さくなり、白い空きスペースができているのを見ると、コーナーが表示されます。その後、画像は（いわば）ドラッグできなくなります。

しかし、置き換えている画像に.css（{'left'： '0px'、'top'： '0px'}）を追加すると、左上に戻り、必要なものをすべてドラッグできます。しかし、明らかに私はズームインしたい場所にとどまりたいと思っています。

（投稿の下のコード） "containment：[data]"を "containment：" parent "に変更すると、ズームインおよびズームアウトした特定の領域に「滞在」できますが、それでも隅に落ちたときの白い空の領域（ただし、画像をもう一度ドラッグすることはできます）と、それが滑らかなパノラマではなくなったという犠牲を払って、もう端にスナップしたような感じになります。

これを回避する簡単な方法はありますか？そして、これはとにかく私の種類の問題に対する良い解決策ですか、それともこの種のものを達成するためのより良い方法がありますか？.animate（）を使用して、1つの画像を大きくしようとしましたが、最終的には同じ問題が発生します。

  <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 に答える