Question

您好我正在尝试使用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上的clik上回到#myimg。但上面的代码不起作用:( 哪里错了!!请帮忙......

Answer 1

#myimgBig上的点击事件正在元素实际存入文档之前注册（您只需将此元素注入原始图像的文档中。因此，您的点击功能与#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();

这应该在页面加载后最初隐藏您的大图像，并在两者之间单击切换。

Answer 2

您需要使用.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

Answer 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;
}

Answer 4

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

您可以通过使用.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/

Answer 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

使用JQuery缩放照片

5 个答案:

编辑：