使用jquery，實現(xiàn)點擊圖片在彈出層顯示大圖，再次點擊關(guān)閉，加入圖片高寬和窗口高寬的大小判斷。

效果圖片如下：

1.點擊前的效果：

2.點擊后的效果：

html代碼如下：

彈出層圖片

Js代碼如下：

$(function() {

$(".pimg").click(function() {

var _this = $(this); //將當前的pimg元素作為_this傳入函數(shù)

imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

});

});

function imgShow(outerdiv, innerdiv, bigimg, _this) {

var src = _this.attr("src"); //獲取當前點擊的pimg元素中的src屬性

$(bigimg).attr("src", src); //設(shè)置#bigimg元素的src屬性

/*獲取當前點擊圖片的真實大小，并顯示彈出層及大圖*/

$("").attr("src", src).load(function() {

var windowW = $(window).width(); //獲取當前窗口寬度

var windowH = $(window).height(); //獲取當前窗口高度

var realWidth = this.width; //獲取圖片真實寬度

var realHeight = this.height; //獲取圖片真實高度

var imgWidth, imgHeight;

var scale = 0.8; //縮放尺寸，當圖片真實寬度和高度大于窗口寬度和高度時進行縮放

if(realHeight > windowH * scale) { //判斷圖片高度

imgHeight = windowH * scale; //如大于窗口高度，圖片高度進行縮放

imgWidth = imgHeight / realHeight * realWidth; //等比例縮放寬度

if(imgWidth > windowW * scale) { //如寬度扔大于窗口寬度

imgWidth = windowW * scale; //再對寬度進行縮放

}

} else if(realWidth > windowW * scale) { //如圖片高度合適，判斷圖片寬度

imgWidth = windowW * scale; //如大于窗口寬度，圖片寬度進行縮放

imgHeight = imgWidth / realWidth * realHeight; //等比例縮放高度

} else { //如果圖片真實高度和寬度都符合要求，高寬不變

imgWidth = realWidth;

imgHeight = realHeight;

}

$(bigimg).css("width", imgWidth); //以最終的寬度對圖片縮放

var w = (windowW - imgWidth) / 2; //計算圖片與窗口左邊距

var h = (windowH - imgHeight) / 2; //計算圖片與窗口上邊距

$(innerdiv).css({

"top": h,

"left": w

}); //設(shè)置#innerdiv的top和left屬性

$(outerdiv).fadeIn("fast"); //淡入顯示#outerdiv及.pimg

});

$(outerdiv).click(function() { //再次點擊淡出消失彈出層

$(this).fadeOut("fast");

});

}

總結(jié)

以上是生活随笔為你收集整理的html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。