HTML5是當前最主流的Web標準之一，其中包含豐富多彩的特性，用于各種網頁設計和開發方面的應用。其中，圖片彈出效果是網頁設計中一個非常實用的效果，能夠增強用戶的交互體驗。以下是如何使用HTML5設置圖片彈出效果的方法：
<!DOCTYPE html>
<html>
<head>
<title>彈出圖片效果</title>
<style>
/*設置圖片彈出框的樣式*/
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
}
/*設置圖片的樣式*/
.popup img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
border: 5px solid #fff;
box-shadow: 0 0 5px #000;
}
/*設置關閉按鈕的樣式*/
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h1>點擊圖片彈出效果</h1>
<img src="image.jpg" alt="圖片" onclick="showImage(this)">
<!--圖片彈出框--><div class="popup">
<img src="image.jpg" alt="圖片">
<span class="close" onclick="closeImage()">×</span>
</div>
<script>
/*顯示圖片*/
function showImage(img) {
var popup = document.querySelector(".popup");
popup.style.display = "block";
popup.firstElementChild.setAttribute("src", img.src);
}
/*關閉圖片*/
function closeImage() {
var popup = document.querySelector(".popup");
popup.style.display = "none";
}
</script>
</body>
</html>代碼中共有三個部分：
第一部分為CSS代碼，用于設置彈出圖片框的樣式，包括彈出框背景顏色、圖片樣式、圖片邊框、及關閉按鈕等。
第二部分為HTML代碼，包括一個h1標簽用于顯示標題，一個img標簽用于顯示圖片，以及一個popup div標簽用于作為彈出圖片框容器。
第三部分為JavaScript代碼，用于監控圖片點擊事件，顯示和關閉彈出圖片框。
在實際應用中，我們只需要將代碼中的圖片地址進行更換即可實現彈出任意圖片的效果。
上一篇js之$.css