在不改變佈局的情況下增加/減少圖像尺寸

Question

我發現這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> 

非常感謝。

Answer 1

是啊，這是可能的，請參閱編輯JSFiddle

• 我已經刪除了克隆方法，並添加改變事件 - 調用方法ZoomIn /縮小（ZoomOut）

代碼：

function ZoomIn() { 
    var p = $(this).offset(); 
    var w = $(this).width(); 
    var h = $(this).height(); 
    var $self = $(this); 

    $self.data("origWidth", w); 
    $self.data("origHeight", h); 
    $self.data("origTop", p.top); 
    $self.data("origLeft", p.left); 
    $self.animate({ 
     top: "-=" + Math.floor(h * 0.5), 
     left: "-=" + Math.floor(w * 0.5), 
     width: Math.floor(w * 2), 
     height: Math.floor(h * 2) 
    }, function() { 
     $self.off("click"); 
     $self.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).off("click"); 
     $(this).click(ZoomIn); 
    }); 

} 

$(function() { 
    $('img').click(ZoomIn); 
}); 

Answer 2

try this code 


<div style="float:left"> 
    <img id="someImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Deletion_icon.svg/600px-Deletion_icon.svg.png"/> 
    <div> 
<div> 
<p>Some random text.</p> 
<p>More blah. More blah.</p> 
<p>Some random text.</p> 
</div>