首先先搭寫(xiě)一個(gè)基本的格式：
創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供丹鳳企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為丹鳳眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。
重慶分公司
重慶分公司
$.fn.popImg = function() {
//your code goes here
}然后用自調(diào)用匿名函數(shù)包裹你的代碼，將系統(tǒng)變量以變量形式傳遞到插件內(nèi)部，如下：
;(function($,window,document,undefined){
$.fn.popImg = function() {
//your code goes here
}
})(jQuery,window,document);那么接下來(lái)我們就在里面實(shí)現(xiàn)點(diǎn)擊文章圖片彈出該圖片并放大的效果。
整體代碼如下：
;(function($,window,document,undefined){
$.fn.popImg = function(){
//創(chuàng)建彈出層
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'
});
//復(fù)制點(diǎn)擊的圖片，獲得圖片的寬高以及位置
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
});
};
//讓復(fù)制的圖片居中顯示
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);
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
標(biāo)題名稱(chēng)：jQuery實(shí)現(xiàn)文章圖片彈出放大效果
地址分享：http://weahome.cn/article/gejoop.html
