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>

增加/减小图像大小而不改变布局

2 个答案: