Изменение размера изображения с Jquery Animate - PullRequest
Новая
       29

Изменение размера изображения с Jquery Animate

5 голосов
/ 03 мая 2011

Можно ли анимировать изображение из центра наружу, а не слева направо (и сверху вниз)? Эффект, которого я пытаюсь достичь, похож на лайтбокс, когда вы нажимаете на изображение, и оно расширяется наружу.

Спасибо!

Ответы [ 3 ]

10 голосов
/ 03 мая 2011

Это не должно быть слишком сложно: 

// increase factor
var factor = 2;

$('#foo').click(function() {
    $(this).animate({
        top: '-=' + $(this).height() / factor,
        left: '-=' + $(this).width() / factor,
        width: $(this).width() * factor
    });
});

Как это достигается:

  • Изображение увеличивается в размере с определенным соотношением.В данном случае это * 2, но я могу представить, что вы хотите сделать что-то умное с верхним пределом или около того.
  • Смещение верхнего и левого изображений уменьшается с текущими размерами, деленными на коэффициент увеличения.

Быстрая демонстрация здесь.

2 голосов
/ 03 мая 2011

@ Решение Арона в порядке, но оно имеет определенные ограничения: у вас не может быть изображения в потоке документов.

Мое решение фактически создает клон изображения с абсолютно позиционированием и показывает его сверхуоригинального изображения.Он рассчитывает абсолютную позицию исходного изображения с использованием .offset().

. Недостатком этого метода является то, что при изменении потока документов (например, при изменении размера окна клиента) абсолютно позиционированный элемент остается на старой позиции.Если вы можете использовать этот метод, зависит от макета вашей страницы.

Нажмите на изображение в моей демонстрации, чтобы переключить эффект.http://jsfiddle.net/Xhchp/3/

HTML: 

<p>Some random text.</p>
<p>More blah. <img id="someImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Deletion_icon.svg/600px-Deletion_icon.svg.png"/> More blah.</p>
<p>Some random text.</p>

CSS: 

#someImage { width:32px; height:32px; }

javascript: 

function ZoomIn(){
    var p = $(this).offset();
    var w = $(this).width();
    var h = $(this).height();
    var $clone = $(this).clone();
    $clone.css({
        position: "absolute",
        left: p.left + "px",
        top: p.top + "px",
        "z-index": 2
    }).appendTo('body');
    $clone.data("origWidth",w);
    $clone.data("origHeight",h);
    $clone.data("origTop",p.top);
    $clone.data("origLeft",p.left);
    $clone.animate({
        top: "-=" + Math.floor(h * 0.5),
        left: "-=" + Math.floor(w * 0.5),
        width: Math.floor(w * 2),
        height: Math.floor(h * 2)
    },function(){
    });
    $clone.click(ZoomOut);
}

function ZoomOut(){
    var w = $(this).data("origWidth");
    var h = $(this).data("origHeight");
    var t = $(this).data("origTop");
    var l = $(this).data("origLeft");
    $(this).animate({
        top: t,
        left: l,
        width: w,
        height: h
    },function(){
        $(this).remove();
    });
}

$(function(){
    $('img').click(ZoomIn);
});
2 голосов
/ 03 мая 2011

Если я правильно понял, вот то, что вы хотите .

Я показываю большое изображение с position: absolute, тогда размер макета не влияет на ваш макет.Если у вас есть вопросы об этом решении, оставьте комментарий здесь.

...