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のclikの#myimgに戻りたいです。しかし、上記のコードは機能しません:(どこが間違っています!!助けてください...

4

5 に答える 5

2

#myimgBigのクリックイベントは、要素が実際にドキュメントに含まれる前に登録されます（この要素は、元の画像のクリック時にドキュメントに挿入するだけです。その結果、＃myimgBigのクリック関数と実際のクリック関数の間にリンクはありません。画像要素。

頭のてっぺんから、最初に両方の要素をロードするか（そうすることで、両方のクリックイベントハンドラーが正しい要素に登録されていることを確認します）、2番目の画像に明示的な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();

これにより、ページの読み込み後に最初に大きな画像が非表示になり、クリックすると2つが切り替わります。

于 2013-03-05T10:02:22.250 に答える
2

そのためには.on（）機能を使用する必要があります。2番目のイメージは動的に作成されるため、ハンドラーはアタッチされません。

$("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。

于 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()。

クリックを次のように置き換えることで、これを修正できます.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 に答える