使用 Jquery Animate 调整图像大小

Posted 2023-05-08

【中文标题】使用 Jquery Animate 调整图像大小

【英文标题】：Image resizing with Jquery Animate

【发布时间】：2011-08-17 18:12:28

【问题描述】：

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

谢谢！

【问题讨论】：

我还没有测试过这个，所以这仍然是一个评论，但你不能改变宽度/高度然后顶部/左侧的动画，顶部/左侧是更改的一半到宽度/高度。

【参考方案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.

【参考方案2】：

@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);
);

【参考方案3】：

如果我没听错的话，here is what you want。

我用position: absolute 显示大图像，那么您的布局不会受到调整大小的图像的影响。如果您对此解决方案有任何疑问，请在此处发布 cmets。

【讨论】：

你会如何切换这个功能？