Question

是否可以从中心向外而不是从左到右（从上到下）制作动画？我试图实现的效果类似于灯箱，当您点击图像并向外扩展时。

谢谢！

Answer 1

这不应该太难：

// increase factor
var factor = 2;

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

如何实现：

图像按一定比例增加尺寸。在这种情况下，它是* 2，但我可以想象你想做一些具有上限左右的智能。
图像顶部和左侧偏移量随着当前尺寸除以增加系数而减小。

Quick demo here.

Answer 2

如果我理解正确，here is what you want。

我使用position: absolute显示大图像，然后您的布局不会受到调整大小的图像的影响。如果您对此解决方案有疑问，请在此处发表评论。

Answer 3

@ Aron的解决方案没问题，但它有一定的局限性：您无法在文档流程中拥有图像。

我的解决方案实际上创建了一个绝对定位的图像克隆，并将其显示在原始图像的顶部。它使用.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);
});

使用Jquery Animate调整图像大小

3 个答案: