admin管理员组

文章数量:1391738

I'm trying to work out how to enlarge all elements on a page, but keep the centre of enlargement in the centre of the window.

On this page, once the image reaches the top or the left side of the window the centre of enlargement changes. It also changes when you move the image. (exactly what you would expect)

I'm thinking I'd need to take a pletely different approach to achieve what I want. But I'm not sure what that approach is..

Any ideas?

I'm trying to work out how to enlarge all elements on a page, but keep the centre of enlargement in the centre of the window.

On this page, once the image reaches the top or the left side of the window the centre of enlargement changes. It also changes when you move the image. (exactly what you would expect)

I'm thinking I'd need to take a pletely different approach to achieve what I want. But I'm not sure what that approach is..

Any ideas?

  • javascript
  • jquery
  • css
  • zooming
  • centering
Share Improve this question edited Mar 8, 2013 at 1:33 animuson♦ 54.8k28 gold badges142 silver badges150 bronze badges asked May 30, 2010 at 20:48 AcornAcorn 50.6k30 gold badges142 silver badges179 bronze badges 2
  • Ah I see, that's really interesting. It's because you're adding 1/4, so you need to subtract 1/5. – Acorn Commented May 30, 2010 at 21:52
  • 1 Yes, the percentage is being calculated on the new dimensions instead of the original. So you need to figure out the proper percentage to get back to the original. Luckily, with a 20% decrease, its a clean 25% increase to return. – user113716 Commented May 30, 2010 at 21:56
Add a ment  | 

2 Answers 2

Reset to default 4

Well, here's my take.

Only thing is that I ditched the containers you were using. Is that cheating? Seems like they were only there to get the image centered. No need.

This works as expected with no side effects.

Here's a working demo you can test:

http://jsfiddle/YFPRB/1/

(You need to click on the pane with the baboon first.)

HTML

<body>

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

</body>

CSS

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

jQuery

EDIT: Thanks to @stagas for the reminder to clean up redundancies.

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

    });​

This is what I came up, it works as you say except the image will always go to the center after zooming in or out:

$('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

        }
    });

});

You should put an ID 'zoomimg' on the tag for it to work, and overflow:hidden on the #container . Also ditch that display:table and display:table-cell they're useless now that we center with Javascript. Also, pressing the down arrow key will cause the container to scroll down, so you should use other keys, as the arrows are reserved by the browser for scrolling the viewport.

本文标签：

版权声明：本文标题：javascript - &quot;Zooming&quot; elements on a page while keeping the centre of enlargement in the centre of the window 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744730899a2622041.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。