jQuery & CSS: пользовательская функция масштабирования ... почти - PullRequest
Новая
       13

jQuery & CSS: пользовательская функция масштабирования ... почти

0 голосов
/ 09 февраля 2011

У меня есть небольшая и простая функция масштабирования, которая исчезает при наложении, а затем изменяет размеры и перемещает изображение по центру в окне браузера над указанным наложением ...

Вы можете проверить страницу, которую я настроил для этой проблемы здесь , я не пробовал 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);
});

1 Ответ

0 голосов
/ 09 февраля 2011

Не имея возможности проверить это самостоятельно:

Для "#display" DIV у вас есть "float: right;". Попробуйте изменить его на "float: left;".

или

Вы можете изменить его на "position: absolute;" и поместить его именно там, где вы хотите (используя "top" и "left") в содержащем его DIV "#content".

...