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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。