Jquery 在不更改布局的情况下增大/减小图像大小

我在另一个我认为对我很有用的地方发现了这个

但是，与示例不同，我不想克隆图像，只需更改图像的位置和大小

我应该如何重写代码使之成为可能

代码如下：

    <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>

//

---

非常感谢。

是的，这是可能的，请参阅编辑的

• 我删除了clone方法并添加了事件调用方法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);
});

试试这个代码
一些随机文本

更多的废话。更多的废话

一些随机文本

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>