使用 JQuery 缩放照片答案

【问题标题】：Zooming photo using JQuery使用 JQuery 缩放照片
【发布时间】：2013-03-05 09:56:49
【问题描述】：

您好，我正在尝试使用 jquery 缩放照片，它也可以正常工作。 demo。但问题是我无法恢复以前的大小。这是代码-

jQuery("#myimg").click(function () {
    $(this).replaceWith( "<img id='myimgBig' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=420' width='420' height='420' title='that&#39;s me' alt='Uddhab' />" );
});
jQuery("#myimgBig").click(function () {
    $(this).replaceWith( "<img id='myimg' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=120' width='120' height='120' title='that&#39;s me' alt='Uddhab' />" );
});

我想在#myimgBig 上单击返回#myimg。但是上面的代码不起作用:( 哪里错了！！请帮忙...

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您需要为此使用.on() 功能。第二张图片是动态创建的，所以没有附加处理程序。

$("body").on("click", "#myimg", function() {
    $(this).replaceWith("<img id='myimgBig' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=420' width='420' height='420' title='that&#39;s me' alt='Uddhab' />");
});

$("body").on("click", "#myimgBig", function() {
    $(this).replaceWith("<img id='myimg' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=120' width='120' height='120' title='that&#39;s me' alt='Uddhab' />");
});

JSFiddle.

【讨论】：

【解决方案2】：

您在#myimgBig 上的点击事件在元素实际在您的文档中之前被注册（您只将此元素注入到原始图像的onclick 文档中。因此，您的#myimgBig 的点击函数之间没有链接和实际的图像元素。

在我的脑海中，我要么一开始就加载这两个元素（这样做，确保两个点击事件处理程序都注册在正确的元素上），要么在第二张图片上添加一个显式的 onclick 属性；或者更好的是，将图像元素包装在跨度或类似元素中，并使用它来处理点击，然后将图像注入跨度内。

最初加载这两个元素你会得到类似的东西

...your html page here...
<img id="myimg" src="..." /><img id="myimgBig" src="..." />

你的 jQuery 可能是

$("#myimg").click(function() {
  $(this).toggle();
  $("#myimgBig").toggle();
}
$("#myimgBig").click(function() {
  $(this).toggle();
  $("#myimg").toggle();
}

$("#myimgBig").toggle();

这应该会在页面加载后隐藏您的大图像，并在两者之间进行点击切换。

【讨论】：

我了解使用切换的好处。

【解决方案3】：

使用css效果

.image{
    position:relative;
    width:100px;
    height:80px;
    left:0px;
    top:0px;
    border:1px solid black;
    /* Apply a CSS3 Transition to width, height, top and left properties */
    transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -o-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -moz-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}

.image:hover
{
    width:150px;
    height:120px;
    left:-25px;
    top:-25px;
    z-index:9999;
}

【讨论】：

【解决方案4】：

我不确定，但我认为这是因为 click() 事件仅在元素首次调用时存在时才会起作用，但它实际上是由 replaceWith() 动态生成的。

您可以通过将 click 替换为 .live("click", function() {}) 来解决此问题，例如：

jQuery("#myimg").live("click", function () {
    $(this).replaceWith( "<img id='myimgBig' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=420' width='420' height='420' title='that&#39;s me' alt='Uddhab' />" );
});
jQuery("#myimgBig").live("click", function () {
    $(this).replaceWith( "<img id='myimg' src='http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=120' width='120' height='120' title='that&#39;s me' alt='Uddhab' />" );
});

虽然您确实应该同时加载两个图像，然后使用点击处理程序来隐藏和显示它们 - 它会响应更快。

编辑：

HTML：

<img src="image_small.jpg" class="images" id="#myimg" />
<img src="image_big.jpg" class="images" id="#myimgBig" />

JS：

$(document).ready(function() {
    $("#myimgBig").hide();
    $(".images").click(function() {
        $('.images').toggle();
    });
});

http://jsfiddle.net/q9gB8/

【讨论】：

请注意 .live() 自 v1.7 以来已被弃用，并在 1.9 中被删除（由 .on() 代替）。

【解决方案5】：

也试试这个，

var zoomIn;
$("#myimg").click(function() {
var imgsrc = (zoomIn) ? "http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=120" : "http://www.gravatar.com/avatar/0f510b2337a6077896036f31d4f45eb7?s=420";
$(this).attr('src', imgsrc); 
$(this).animate({
    width: (zoomIn) ? "120px" : "420px",
    height: (zoomIn) ? "120px" : "420px"
}, 1000);
zoomIn = !(zoomIn);
});

演示地址：jsfiddle

【讨论】：