jQuery追加CSS

Question

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

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

问题是，边距样式仅在第二次单击[data-onclick =“ zoom”]后才适用。

为什么这样？

Answer 1

$('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-zoom用作id ，但是如果要对多个项目使用相同的id则将id更改为class ，因为不允许多个文档使用相同的id作为文档页面。

Answer 2

我会尝试不同的方法，例如：

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

这是一个现场演示 。

就像我在评论中说的那样，如果这是您要完成的工作...