jQuery实现文章图片弹出放大效果

站长资源 2024/11/13 佚名

41 1538 41

相思资源网 Design By www.200059.com

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

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

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

jquery,图片弹出放大,jquery实现图片放大,jquery实现图片放大镜

标签：