jQuery插件之文章图片弹出放大效果

$.fn.popImg = function() {
    //your code goes here
}

;(function($,window,document,undefined){
    $.fn.popImg = function() {
      //your code goes here
    }
})(jQuery,window,document);

;(function($,window,document,undefined){
  $.fn.popImg = function(){

      //创建弹出层
      var $layer = $("<div>").css({
        position:‘fixed‘,
        left:0,
        right:0,
        top:0,
        bottom:0,
        width:‘100%‘,
        height:‘100%‘,
        zIndex:9999999,
        display:‘none‘,
        background: "#000",
        opacity:‘0.6‘
      });

      //复制点击的图片，获得图片的宽高以及位置
      var cloneImg = function($targetImg){
          var cloneW = $targetImg.width(),
              cloneH = $targetImg.height(),
              left = $targetImg.offset().left,
              top = $targetImg.offset().top;

          return $targetImg.clone().css({
              position:‘fixed‘,
              width:cloneW,
              height:cloneH,
              left:left,
              top:top,
              zIndex:10000000
          });
      };

      //让复制的图片居中显示
      var centerImg = function($cloneImg){
          var dW = $(window).width();
          var dH = $(window).height();
          $cloneImg.css(‘cursor‘,‘zoom-out‘).attr(‘clone-bigImg‘,true);
          var img = new Image();
          img.onload = function(){
            $cloneImg.stop().animate({
                 width: this.width,
                height: this.height,
                left: (dW - this.width) / 2,
                top: (dH - this.height) / 2
            },300);
          }
          img.src = $cloneImg.attr(‘src‘);
      };
      
      this.each(function(){
          $(this).css(‘cursor‘,‘zoom-in‘).on(‘click‘,function(){
              var $body = $("body");
              $layer.appendTo($body);
              $layer.fadeIn(300);
              var $c = cloneImg($(this));
              $c.appendTo($body);
              centerImg($c);
          });
      });

    var timer = null;
    $(window).on("resize", function(){
      $("img[clone-bigImg]").each(function(){
        var $this = $(this);
        timer && clearTimeout(timer);
        timer = setTimeout(function(){
          centerImg($this);
        }, 10);
      });
    });


    $(window).on("click keydown", function(evt){
      if(evt.type == "keydown" && evt.keyCode === 27) {
        $layer.fadeOut(300);
        $("img[clone-bigImg]").remove();
      }
      var $this = $(evt.target);
      if($this.attr("clone-bigImg")){
        $layer.fadeOut(300);
        $("img[clone-bigImg]").remove();
      }
    });

  }
})(jQuery,window,document);