«Масштабирование» элементов на странице с сохранением центра увеличения в центре окна - PullRequest
Новая
       22

«Масштабирование» элементов на странице с сохранением центра увеличения в центре окна

4 голосов
/ 31 мая 2010

Я пытаюсь решить, как увеличить все элементы на странице, но сохранить центр увеличения в центре окна.

На этой странице, когда изображение достигает верхней или левой стороны окна, центр увеличения изменяется. Это также меняется, когда вы перемещаете изображение. (именно то, что вы ожидаете)

Я думаю, мне нужно было бы использовать совершенно другой подход для достижения того, чего я хочу. Но я не уверен, что это за подход ..

Есть идеи?

Ответы [ 2 ]

4 голосов
/ 31 мая 2010

Ну, вот мой дубль.

Единственное, что я бросил контейнеры, которые вы использовали. Это обман? Похоже, они были только там, чтобы центрировать изображение. Нет необходимости.

Работает, как и ожидалось, без побочных эффектов.

Вот рабочая демоверсия, которую вы можете проверить:

http://jsfiddle.net/YFPRB/1/

(сначала нужно нажать на панель с павианом.)

HTML 

<body>

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />

</body>

CSS 

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}​

JQuery

РЕДАКТИРОВАТЬ: Спасибо @ stagas за напоминание об устранении избыточности. 

 var $img = $('img');  // Cache the image. Better for performance.

  $img.draggable();


  $img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
      .css({top: ($('body').height() / 2) - ($img.height() / 2)})


  $(document).keydown(function(event) {

      if (event.keyCode == 38) {
          var adjustment = 1.25;
      } else if (event.keyCode == 40)  {
          var adjustment = 0.8;
      } else {
          return;
      }

      var offset = $img.offset();  

      var width = $img.width();
      var height = $img.height();

      var newWidth = width * adjustment;
      var newHeight = height * adjustment;

      var diffWidth = newWidth - width;
      var diffHeight = newHeight - height;

      var hcenter = $('body').width() / 2;
      var vcenter = $('body').height() / 2;

      var leftPercent = (hcenter - offset.left) / width;
      var topPercent = (vcenter - offset.top) / height;

      $img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});

      $img.width(newWidth).height(newHeight);

    });​
3 голосов
/ 31 мая 2010

Это то, что я придумал, работает так, как вы говорите, за исключением того, что изображение всегда будет идти в центр после увеличения или уменьшения масштаба: 

$('document').ready(function() {
    zoomimg=$('#zoomimg'); // we store this in a variable since we don't need to traverse the DOM every time -- this is faster

    var viewportWidth = $(window).width();
    var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera
    zoomimg.css({'position': 'absolute', 'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)}).draggable();


    $(document).keydown(function(event) {
        event = event || window.event;

        var viewportWidth = $(window).width();
        var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // this is to work with Opera

        if (event.keyCode == 38) {

            width = zoomimg.width();
            height = zoomimg.height();

            zoomimg.width(width*1.2).height(height*1.2);

            var viewportWidth = $(window).width();
            var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
            zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});


        } else if (event.keyCode == 40) {

            width = zoomimg.width();
            height = zoomimg.height();

            zoomimg.width(width*0.8).height(height*0.8);

            var viewportWidth = $(window).width();
            var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
            zoomimg.css({'left': (viewportWidth/2)-(zoomimg.width()/2), 'top' : (viewportHeight/2)-(zoomimg.height()/2)});

        } else {

            return

        }
    });

});

Вы должны поместить идентификатор 'zoomimg' в тег, чтобы он работал, а переполнение: скрыто в #container. Также помешайте отображению: table и display: table-cell, теперь они бесполезны, так как мы сосредоточены на Javascript. Кроме того, нажатие клавиши со стрелкой вниз приведет к прокрутке контейнера вниз, поэтому вам следует использовать другие клавиши, так как стрелки зарезервированы браузером для прокрутки области просмотра.

...