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

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

rush:js;"> $.fn.popImg = function() { //your code goes here }

然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递到插件内部，如下：

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

那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。

整体代码如下：

rush:js;"> ;(function($,undefined){ $.fn.popImg = function(){

//创建弹出层
var $layer = $("

").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,document);

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

原文地址：https://www.jb51.cc/jquery/40173.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jQuery自定义图片上传插件实例代码下一篇：jQuery获取table下某一行某一列的值