您的位置: 首頁 > 源碼資料
最簡單實用的鼠標(biāo)移到圖片上變成另外圖片的效果集
源碼資料 時間:2014-09-26 作者/發(fā)布人:科杰在線 點擊:4145
下面這個用來做最簡單的切換圖片效果，可以用來做產(chǎn)品展示之類的效果
<script>
function showDaTu(src){document.getElementById("defaultImg").src=src;}
</script>
<img src="a.jpg" id="defaultImg">
<br><br>
<img src='b.jpg' onmouseover="showDaTu('c.jpg')">
<img src='d.jpg' onmouseover="showDaTu('e.jpg')">
<img src='f.jpg' onmouseover="showDaTu('g.jpg')">
<img src='h.jpg' onmouseover="showDaTu('i.jpg')">
<br>
因圖片較大，請等待圖片加載完成……然后鼠標(biāo)放小圖上就會切換了。
鼠標(biāo)移到圖片上會變成另一張圖
<img src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">
但此法有個問題：假設(shè)第二張圖片比較大, 那你這個mouseover 用戶要等N久才能看到新的圖片, 因為在客戶端沒有這張圖片的緩存, 客戶端必須重新發(fā)一次請求到服務(wù)器端取這張圖片。不過可以使用另一種簡單的蠢辦法，就是加一個0高度的DIV，把 2.jpg放進(jìn)去，刷新頁面時就會加載這張圖了。<div style="height:0; overflow:hidden;"><img src="2.jpg" /></div>
<script>
function showDaTu(src){document.getElementById("defaultImg").src=src;}
</script>
<img src="a.jpg" id="defaultImg">
<br><br>
<img src='b.jpg' onmouseover="showDaTu('c.jpg')">
<img src='d.jpg' onmouseover="showDaTu('e.jpg')">
<img src='f.jpg' onmouseover="showDaTu('g.jpg')">
<img src='h.jpg' onmouseover="showDaTu('i.jpg')">
<br>
因圖片較大，請等待圖片加載完成……然后鼠標(biāo)放小圖上就會切換了。
鼠標(biāo)移到圖片上會變成另一張圖
<img src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">
但此法有個問題：假設(shè)第二張圖片比較大, 那你這個mouseover 用戶要等N久才能看到新的圖片, 因為在客戶端沒有這張圖片的緩存, 客戶端必須重新發(fā)一次請求到服務(wù)器端取這張圖片。不過可以使用另一種簡單的蠢辦法，就是加一個0高度的DIV，把 2.jpg放進(jìn)去，刷新頁面時就會加載這張圖了。<div style="height:0; overflow:hidden;"><img src="2.jpg" /></div>
--------------------------全文完----------------------------
0% (0)
0% (0)
生活常識
- 騷年，年底大掃除如何清理最霸道的廚房油污你..(12-22)
- 吃了幾十年火鍋，竟然才發(fā)現(xiàn)吃錯了(12-17)
- 安徽職工生育保險津貼如何領(lǐng)取？流產(chǎn)津貼如何..(12-05)
- 十萬個為什么？女性私處為什么會變黑(11-19)
- 人體內(nèi)全部秘密，再不對自己好點就晚了(11-16)
創(chuàng)意無限
- 英國“神奇凝膠”緩解“皮肉之苦”(08-03)
- 德攝影師制作奇妙光涂鴉頗似壯觀煙花(組圖)(05-10)
- 英國女學(xué)生用立體涂鴉畫出“隱形車”(圖)(05-10)
- 創(chuàng)意到實用！國外知名地鐵站設(shè)計欣賞(04-13)
- 工業(yè)革命時代的粗曠！起重機造型吊燈(04-13)
源碼資料
- javascript實現(xiàn)網(wǎng)頁跳轉(zhuǎn)的方法(10-29)
- CSS+DIV常用小代碼的收集(10-07)
- 自動判斷手機、平板與電腦訪問不同網(wǎng)址頁面的..(09-30)
- 最簡單實用的鼠標(biāo)移到圖片上變成另外圖片的效..(09-26)
- VB鼠標(biāo)離開窗體時就執(zhí)行某個代碼如何實現(xiàn)？(06-30)
資源中心
- 原文：為什么這么多人黑周星馳(全文)(09-12)
- 紅藍(lán)3D眼鏡測試演示3D圖片-風(fēng)景、人物及其他2..(02-06)
- 紅藍(lán)3D眼鏡測試演示3D圖片及美女3D視頻-美女篇..(02-06)
- “東亞病夫”是中國人自已罵自已的,非洋人(08-06)
- eWebEditor不支持IE8、IE7、火狐、傲游的解決..(06-13)
