|
|
將Javascript代碼放到</body>前（將腳本代碼放在頁(yè)面底端有助于提高頁(yè)面速度，但是我現(xiàn)在還沒(méi)有切身的體會(huì)）
復(fù)制代碼 代碼如下:
<script language=JavaScript>
function mouseOutPic() //當(dāng)鼠標(biāo)移出時(shí)，隱藏原圖
{
if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden";
//如果鼠標(biāo)不在img000上的話(huà)，將這個(gè)區(qū)域隱藏
}
function mouseOverPic(imgSrc) //當(dāng)鼠標(biāo)移上小圖時(shí)，顯示原圖
{
var seeBig = document.getElementById("bigPic"); //得到將要顯示原圖區(qū)域的div element
var newImg = document.createElement("img"); //新建一個(gè)img element，將原圖的src賦給這個(gè)element
newImg = "<img src=/'" + imgSrc + "/'/>"; //注意這里，是為整個(gè)element賦值，我在這個(gè)小問(wèn)題上還花了挺多時(shí)間
//alert(imgSrc);
seeBig.innerHTML = newImg; //將原圖賦給要顯示的區(qū)域
}
</script>
下面是HTML代碼：
復(fù)制代碼 代碼如下:
<!--下面這個(gè)ID是img000的element是略縮圖，鼠標(biāo)懸停在它上面即出現(xiàn)原圖-->
<!--onmouseover方法中調(diào)用了mouseOverPic函數(shù)（見(jiàn)上面），傳給它的參數(shù)是原圖的URL-->
<!--調(diào)用mouseOverPic之后，將原圖顯示區(qū)域設(shè)為可見(jiàn)-->
<img id="img000" src="images/general/emailAt.jpg" onmouseover="mouseOverPic('images/general/usc_badge.jpg'); bigPic.style.visibility='visible'" onmouseout="mouseOutPic()">
<!--頁(yè)面初始化的時(shí)候，原圖顯示區(qū)域是隱藏的-->
<div id="bigPic" style="visibility:hidden;">
</div>
上面這個(gè)代碼沒(méi)有控制原圖出現(xiàn)的位置，如果涉及到靠近窗口邊緣的位置的話(huà)會(huì)用到offsetLeft等屬性。
仔細(xì)想想，其實(shí)這個(gè)也蠻簡(jiǎn)單的。寫(xiě)Javascript的需要多多注意細(xì)節(jié)，這個(gè)實(shí)在是太重要了，一不小心就會(huì)出錯(cuò)，最糟糕的是不知道錯(cuò)在哪里。
JavaScript技術(shù)：javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失（多圖），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
