JQuery是一個流行的JavaScript庫，它可以讓我們更加輕松地操控文檔對象模型（DOM），一種在Web頁面中使用的API，它將HTML、XHTML或XML文檔表示成樹形結(jié)構(gòu)的節(jié)點(diǎn)集合。

在網(wǎng)頁設(shè)計中，圖片常常是頁面中非常重要的元素。而圖片全屏效果是一個常見的需求，本文將介紹如何使用JQuery來實(shí)現(xiàn)圖片全屏。

$(document).ready(function(){
$("#img-fullscreen").click(function(){
//獲取當(dāng)前窗口的寬度和高度
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
//獲取要全屏的圖片
var imgSrc = $(this).attr("src");
//創(chuàng)建全屏遮罩層
var shade = $("
");
shade.css({
background:"rgba(0,0,0,0.7)",
position:"fixed",
top:0,
left:0,
width:windowWidth+"px",
height:windowHeight+"px",
zIndex:999
});
$("body").append(shade);
//將圖片居中并全屏展示
var img = $("");
img.attr("src",imgSrc);
img.css({
position:"fixed",
top:"50%",
left:"50%",
transform:"translate(-50%,-50%)",
maxWidth:"90%",
maxHeight:"90%",
cursor:"pointer"
});
$("body").append(img);
//點(diǎn)擊遮罩層或圖片時全屏消失
shade.click(function(){
shade.remove();
img.remove();
});
img.click(function(){
shade.remove();
img.remove();
});
});
});

上述代碼中，當(dāng)我們點(diǎn)擊ID為“img-fullscreen”的圖片時，JQuery會獲取當(dāng)前瀏覽器窗口的寬度和高度，創(chuàng)建一層遮罩層，同時將圖片以及對應(yīng)的CSS樣式建立到DOM中。遮罩層和圖片都可以被單擊消除。

通過這種方式，我們可以使用JQuery來實(shí)現(xiàn)圖片全屏效果，提升網(wǎng)頁的用戶體驗(yàn)。