jQuery实现文章图片弹出放大效果
编程学习 2021-07-04 18:31www.dzhlxh.cn编程入门
本文主要介绍jQuery实现文章图片弹出放大效果的相关知识。具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
首先先搭写一个基本的格式：
$.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);
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！