是否有可能从中心向外而不是从左到右(从上到下)制作动画？我试图实现的效果类似于灯箱,当您单击图像并向外扩展时.
谢谢！
解决方法
@ 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);
});