javascript - jQuery追加css

Question

我正在尝试制作一个简单的图像缩放脚本。

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

问题是边距样式仅在第二次 a[data-onclick="zoom"] 单击后应用。

为什么这样？

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多个元素相同是不允许的文档页面。