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

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

# jquery # 图片弹出放大 # jquery实现图片放大 # jquery实现图片放大镜 # jQuery实现的鼠标滑过弹出放大图片特效 # jQuery插件zoom实现图片全屏放大弹出层特效 # jQuery实现等比例缩放大图片让大图片自适应页面布局 # 用JQuery模仿淘宝的图片放大镜显示效果 # 基于jquery实现一张图片点击鼠标放大再点缩小 # 基于Jquery插件开发之图片放大镜效果(仿淘宝) # jQuery当鼠标悬停时放大图片的效果实例 # jquery图片放大镜功能的实例代码 # 弹出 # 就在 # width # height # position # left # fixed # bottom # top # opacity # cloneImg # cloneW # targetImg # zIndex # display # background # css # popImg # fn # code

返回目录在线咨询

上一篇：AI模型训练如何实现文本分类的完整流程【教程】
下一篇：如何利用Discuz! 的模板系统来自定义网站界面？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求