使用Jquery Animate调整图像大小 [英] Image resizing with Jquery Animate

问题描述

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

Is it possible to have a picture animate from the center outwards rather than from left to right (and top to bottom)? The effect I'm trying to achieve is similar to lightbox, when you click on an image and it expands outwards.

谢谢！

推荐答案

@ Aron的解决方案没问题，但它有一些限制：你不能在文档流程中有图像。

@Aron's solution is ok, but it comes with certain limitations: you can't have an image within the document flow.

我的解决方案实际上创建了一个绝对定位的图像克隆，并将其显示在原始图像的顶部。它使用 .offset（）计算原始图像的绝对位置。

My solution actually creates an absolutely positioned clone of the image and shows it on top of the original image. It calculates the original image's absolute position using .offset().

此方法的缺点是如果文档流更改（例如调整客户端窗口大小时），绝对定位的元素保持在旧位置。如果你可以使用这种方法，这取决于页面的布局。

The disadvantage of this method is that if the document flow changes (such as when resizing the client window), the absolutely positioned element stays at the old position. It depends on the layout of your page if you can use this method or not.

点击我的演示中的图像来切换效果。 http://jsfiddle.net/Xhchp/3/

Click on the image in my demo to toggle the effect. 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：

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调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！