1

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

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。但是上面的代码不起作用:(哪里错了！！请帮忙...

4

5 回答 5

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();

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

于 2013-03-05T10:02:22.250 回答
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' />");
});

JSF中。

于 2013-03-05T10:03:08.693 回答
0

使用 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;
}
于 2013-03-05T10:03:00.347 回答
0

我不确定，但我认为这是因为该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/

于 2013-03-05T10:03:09.137 回答
0

也试试这个，

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

于 2013-03-05T10:26:32.003 回答