Я нашел этот JSFiddle в другом post, который, я думаю, отлично подходит для меня.Увеличить/уменьшить размер изображения без изменения раскладки
Однако, в отличие от примера, я не хочу клонировать изображение, просто изменяя положение и размер изображения.
Как мне переписать код, чтобы сделать это возможным?
Вот код:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
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);
});
});//]]>
</script>
Большое спасибо.
Спасибо. Выглядит и отлично работает. – user3904924