HTML5是Web前端技術(shù)中一個非常重要的語言，它可以幫助我們創(chuàng)建出更加豐富、交互性更強的網(wǎng)站。其中的燈箱效果也是一種非常流行的效果，可以讓用戶在點擊小圖后，彈出一個大圖來查看。
下面將介紹一種簡單的HTML5燈箱效果制作代碼：
首先，在HTML文件中引入jQuery庫和CSS文件：
<head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" type="text/css" href="lightbox.css" /> </head>接下來，我們需要編寫一段jQuery代碼來實現(xiàn)燈箱效果。代碼如下：
<script>
$(document).ready(function() {
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').click(function(e) {
e.preventDefault();
var imgWidth = $(window).width() * 0.8;
var imgHeight = $(window).height() * 0.8;
var imgSrc = $(this).attr('href');
$('<div id="lightbox"><img src="' + imgSrc + '" style="width:' + imgWidth + 'px;height:' + imgHeight + 'px;" /></div>').fadeIn().appendTo('body');
});
$('body').on('click', '#lightbox', function() {
$(this).fadeOut(function() {
$(this).remove();
});
});
});
</script>在上面的代碼中，我們首先選擇了所有后綴名為.jpg、.jpeg、.png和.gif的圖片鏈接。當(dāng)用戶點擊這些鏈接時，我們使用了preventDefault()方法來阻止默認的鏈接跳轉(zhuǎn)行為。然后，我們創(chuàng)建了一個包含一個img標(biāo)簽的div元素，并將其添加到了頁面中。最后，我們使用fadeIn()方法使燈箱效果逐漸出現(xiàn)。
我們還添加了一個點擊事件，當(dāng)用戶點擊燈箱圖像時，燈箱效果就會慢慢消失。整個過程非常簡單易懂，只需要較少的代碼量就可以實現(xiàn)一個非常優(yōu)美的效果。