Question

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

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

CSS： 正如我现在所知道的那样，只要我将图像的位置定义为绝对位置并定义起始顶部和左侧位置，这一切都有效： < / p>

#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“{{1} }”。

jQuery＆amp; CSS：自定义缩放功能......几乎就在那里

1 个答案: