jQuery 和CSS：自定义缩放功能...差不多了

Question

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

您可以查看我针对此问题设置的页面 这里，我没有尝试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”中。