jQuery & CSS : Custom zoom function. .. 差不多了

Question

我有一个小而简单的缩放功能，它会在叠加层中淡入淡出，然后调整大小并重新定位位于上述叠加层上方浏览器窗口中心的图像...

你可以查看我为这个问题设置的页面 here ，我没有尝试 jFiddling 这个。如果您移动浏览器窗口，图像不会随其他内容一起移动，但缩放背后的想法非常有效。在此先感谢您的任何建议!

CSS: 正如我现在所了解的那样，只要我将图像的位置定义为绝对位置并定义起始顶部和左侧位置，它就可以正常工作:

#image{
    display:none; // faded in
    position:absolute;
    top:14em;
    left:30em;
    z-index:999999; // stay above overlay
}

jQuery: 这里是完整的 jQuery 函数:

    $("#display a").toggle(function(e){
    e.preventDefault()

    overlay = $("#overlay");
    image = $('#image');

            // Grab original sizes and positions for
            // calculations and zooming back out...

    o_width = image.width();
    o_height = image.height();
    o_left = image.css('left');
    o_top = image.css('top');

            // Define new width and calculate
            // new height from that...

    var n_width = 1024;
    var n_height = (n_width/o_width*o_height)

            // Grab window dimensions to center image
            // then calculate top and left offset...

    var w_height = $(window).height();
    var w_width = $(window).width();

    var left = (w_width-n_width)/2;
    var top = (w_height-n_height)/2;

    overlay.fadeTo(500,0.8);

    image.animate({
    left: left,
    top: top,
    height: n_height,
    width: n_width
      }, 300);

},function(e){
    e.preventDefault()

    overlay.fadeOut(500);

    image.animate({
    left: o_left,
    top: o_top,
    height: o_height,
    width: o_width
      }, 300);
});

Answer 1

无法自己测试:

对于“#display”DIV，您有“float: right;”。尝试将其更改为“float: left;”。

或:

您可以将其更改为“position: absolute;”并将其准确放置在您想要的位置(使用“top”和“left") 在其包含的 DIV“#content”中。