javascript - Jquery追加css

Question

簡単な画像ズーム スクリプトを作成しようとしています。

http://jsfiddle.net/GbDw9/1051/

問題は、マージン スタイルが [data-onclick="zoom"] の 2 回目のクリック後にのみ適用されることです。

なんでそうなの？

Answer 1

次のように、別のことを試してみます。

  $("a[data-onclick='zoom']").click(function() {

    // remove if exists
    if($(".image-zoom").length > 0)
      $(".image-zoom").remove();

    // add image
    $("<img />", { 
      "src": $(this).attr("data-image"), 
      "class": "image-zoom" }).appendTo("body");

    // get image size
    var h = $(".image-zoom").height(),
        w = $(".image-zoom").width();

    //animate
    $(".image-zoom")
      .css({
        "height": 0
      })
      .animate(
      {
        "opacity": 1,
        "height": h
      }, 1000);

      return false;
  });

HTML のどこに次のように記述しますか。

<a href="#" 
   data-onclick="zoom" 
   data-image="http://samurai.releasetracker.ru/media/images/movie/original/jCH93cL8b6uYVK9jWs6xw3IvQbA_1.jpg"
   >click</a>

これがライブデモです。

私のコメントで言ったように、これがあなたが達成しようとしていることですか...

Answer 2

$('a[data-onclick="zoom"]').click(function () {
   $('body')
       // append complete
       .append('<div id="image-zoom"><span id="close"></span><img src="http://samurai.releasetracker.ru/media/images/movie/original/jCH93cL8b6uYVK9jWs6xw3IvQbA_1.jpg"></div>')
       // find last appended div
       .find('#image-zoom:last')
       // giving CSS
       .css({
         'margin': '-' + ($('#image-zoom > img').height() / 2) + 'px 0 0 -' + ($('#image-zoom > img').width() / 2) + 'px'
       });
   return false;
});

デモ

ノート

image-zoomasを使用していますidが、複数のアイテムを同じにしたい場合は、idに変更idします。複数の要素のclass同じidはドキュメントページでは許可されていないためです。