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