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

Posted 2020-09-08 风雨后见彩虹

首先先搭写一个基本的格式：

$.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);

参考地址：http://barretlee.com/blog/2015/09/19/jquery-plugin-for-alert-img/