@ La solución de Aron está bien, pero tiene ciertas limitaciones: no se puede tener una imagen dentro del flujo de documentos.
Mi solución realmente crea un clon de la imagen completamente posicionado y lo muestra en la parte superior de la imagen original. Calcula la posición absoluta de la imagen original usando .offset()
.
La desventaja de este método es que si el flujo de documentos cambia (como al cambiar el tamaño de la ventana del cliente), el elemento absolutamente posicionado permanece en la posición anterior. Depende del diseño de su página si puede usar este método o no.
Haga clic en la imagen en mi demostración para alternar el efecto. 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);
});
No he probado esto, así que esto seguirá siendo un comentario, pero no pudiste cambie animar el ancho/alto y luego el superior/izquierdo, con la parte superior/izquierda siendo la mitad de los cambios al ancho/alto. – Robert