javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失(多圖)
更新時(shí)間:2009年12月28日 22:00:29 作者:
其實(shí)我想實(shí)現(xiàn)的只是大圖預(yù)覽,不需要太復(fù)雜。后來(lái),在原來(lái)有的javascript資料里找到這個(gè):)“JavaScript網(wǎng)頁(yè)設(shè)計(jì)300例.chm”,
從里面找到了類(lèi)似的下拉菜單的例子修改了一下,以實(shí)現(xiàn)這個(gè)功能。
具體用法是這樣的:
將Javascript代碼放到</body>前(將腳本代碼放在頁(yè)面底端有助于提高頁(yè)面速度,但是我現(xiàn)在還沒(méi)有切身的體會(huì))
<script language=JavaScript>
function mouseOutPic() //當(dāng)鼠標(biāo)移出時(shí),隱藏原圖
{
if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden";
//如果鼠標(biāo)不在img000上的話,將這個(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代碼:
<!--下面這個(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ì)用到offsetLeft等屬性。
仔細(xì)想想,其實(shí)這個(gè)也蠻簡(jiǎn)單的。寫(xiě)Javascript的需要多多注意細(xì)節(jié),這個(gè)實(shí)在是太重要了,一不小心就會(huì)出錯(cuò),最糟糕的是不知道錯(cuò)在哪里。
將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上的話,將這個(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ì)用到offsetLeft等屬性。
仔細(xì)想想,其實(shí)這個(gè)也蠻簡(jiǎn)單的。寫(xiě)Javascript的需要多多注意細(xì)節(jié),這個(gè)實(shí)在是太重要了,一不小心就會(huì)出錯(cuò),最糟糕的是不知道錯(cuò)在哪里。
您可能感興趣的文章:
- JS代碼實(shí)現(xiàn)頁(yè)面切換效果
- 基于JS實(shí)現(xiàn)翻書(shū)效果的頁(yè)面切換樣式
- 簡(jiǎn)單實(shí)現(xiàn)js頁(yè)面切換功能
- 使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法
- javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時(shí)彈出懸浮層效果
- js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例
- Vue.js鼠標(biāo)懸浮更換圖片功能
- js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果
- js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法
- JavaScript實(shí)現(xiàn)鼠標(biāo)懸浮頁(yè)面切換效果
相關(guān)文章
javascript dom代碼應(yīng)用 簡(jiǎn)單的相冊(cè)[firefox only]
最近一直對(duì)前端開(kāi)發(fā)很感興趣,特別是在像jquery這種流行ajax類(lèi)庫(kù)的幫助下,即使沒(méi)有很好的javascript功底也能做出不錯(cuò)的動(dòng)態(tài)效果,確實(shí)是方便。2010-06-06一個(gè)簡(jiǎn)單的javascript圖片放大效果代碼
javascript圖片放大效果多用于小圖片產(chǎn)品的展示。2010-08-08html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08