Javascript Caption是指利用Javascript語言來實(shí)現(xiàn)網(wǎng)頁中的文字描述預(yù)覽效果。當(dāng)鼠標(biāo)經(jīng)過一張圖片時(shí)，通常會(huì)出現(xiàn)一段文字描述，這個(gè)描述即為Caption。Javascript Caption通常用于圖片的gallery效果，即點(diǎn)擊一張圖片后，能夠預(yù)覽其它圖片，并提供相應(yīng)的文字描述。

在Javascript Caption中，最常見的實(shí)現(xiàn)方式是利用CSS樣式來定義樣式，利用Javascript事件函數(shù)來控制描述內(nèi)容。例如下面的代碼：

<img src="picture.jpg" onmouseover="showCaption('這是一張美麗的圖片')" onmouseout="hideCaption()">
<div id="caption"></div>

在上面的代碼中，當(dāng)用戶將鼠標(biāo)移至圖片上方時(shí)，會(huì)自動(dòng)觸發(fā)onmouseover事件，這個(gè)事件會(huì)通過Javascript函數(shù)showCaption()來顯示描述文字，而該文字是寫在外部div容器caption中的。代碼如下：

function showCaption(captionText) {
	document.getElementById('caption').innerHTML = captionText;
	document.getElementById('caption').style.display = 'block';
}

可以看到，showCaption函數(shù)接收一個(gè)參數(shù)captionText，這個(gè)參數(shù)即為我們要顯示在頁面上的文字描述。在函數(shù)中，我們利用document.getElementById()方法來獲取caption元素，然后設(shè)置它的innerHTML屬性為captionText，最后將caption元素的display屬性設(shè)置為'block'，這樣就能夠讓文字描述顯示在頁面上。

當(dāng)用戶將鼠標(biāo)移出圖片區(qū)域后，會(huì)自動(dòng)觸發(fā)onmouseout事件，這個(gè)事件會(huì)通過Javascript函數(shù)hideCaption()來隱藏描述文字。代碼如下：

function hideCaption() {
	document.getElementById('caption').innerHTML = '';
	document.getElementById('caption').style.display = 'none';
}

可以看到，hideCaption函數(shù)的代碼與showCaption函數(shù)的代碼非常相似，只是將captionText設(shè)置為空，然后將caption元素的display屬性設(shè)置為'none'，這樣就能夠讓文字描述在離開圖片區(qū)域后消失。

除了這種基本的Javascript Caption之外，我們還可以利用一些插件來實(shí)現(xiàn)更復(fù)雜的效果。例如，jQuery Caption Hover插件能夠?qū)崿F(xiàn)在圖片上方顯示黑色透明的文字框，并在鼠標(biāo)經(jīng)過時(shí)逐漸變成不透明，提供更好的視覺效果。

總之，Javascript Caption是一種非常有用的技術(shù)，能夠?yàn)榫W(wǎng)頁提供更豐富的交互效果和更好的用戶體驗(yàn)。