我遇到this網站,並且想要實現類似於圖片更改徽標的事情,同時鼠標正在移入我自己的網站。我不確定它是否使用jQuery作爲頁面源代碼有點令人困惑,有沒有辦法讓我在javascript中做到這一點?在javascript中移動mousemove上的圖片
0
A
回答
0
如果你有一個div或者其他的block元素而不是圖片標籤,你也可以使用css來實現同樣的效果。
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}
1
實際上,該網站使用背景子畫面,並顯示每個標誌變更子畫面的位置。
這是標誌精靈形象: http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
你應該做的基礎上,精靈佈局一些計算,以及如何快速「」你想改變形象。
看到這, http://docs.jquery.com/Tutorials:Mouse_Position
,然後更改元素的背景位置。
+0
Sprites會做,這裏不需要JS。 – 2013-02-28 20:23:27
+0
Sprites還具有附加的優點,即所有圖像都是「預加載」的,因爲只有一個大圖像,而不是具有不同的圖像,這將導致新加載的圖像閃爍一段時間,直到它們完全加載。 – DanC 2013-02-28 20:34:41
相關問題
- 1. Semplice-向網站添加Javascript;在mousemove上移動背景圖像
- 2. 純Javascript如何放大圖片在mousemove?
- 3. 用JavaScript移動圖片
- 4. 用於移動的Javascript圖片庫
- 5. 背景圖片在移動設備上
- 6. picturebox中的移動圖片
- 7. 在javascript中的圖像上mousemove箭頭時出錯?
- 8. Javascript,移動按鈕上的特定圖片點擊
- 9. 在其他元素的mousemove上移動svg視口
- 10. 圖片在網頁上滾動時在網頁上移動
- 11. 通過捕獲MouseUp和MouseMove在圖片框中的圖像上繪製圖像(拖動並繪製圖像)
- 12. 移動圖片ontouch
- 13. 如何在編輯器中自由移動上傳的圖片?
- 14. jQuery - 用於移動設備的mousemove
- 15. 移動圖片框vb.net mousekeydown和以上
- 16. 在循環中移動背景圖片
- 17. 圖片在iOS中用手指在屏幕上移動
- 18. 移動圖片上面的內容在手機上
- 19. 移動視圖上的Javascript錯誤
- 20. Jquery在mousemove上拖動,但不在mousedown
- 21. Silverlight MouseMove:在移動過程中發現丟失的點
- 22. 如何讓圖像在桌面上的圖片下有文字,但在Bootstrap上的移動圖片的右側?
- 23. Javascript圖片上傳
- 24. 面板中的移動圖片框
- 25. 背景中的可移動大圖片
- 26. 圖片未集中在網站上,集中在移動設備上
- 27. 在移動設備上上傳圖片以用於drupal站點
- 28. 如何在javascript中移動圖像
- 29. 上傳並移除圖片
- 30. 移動應用圖片
使用jQuery鼠標懸停事件來更改圖像的src – 2013-02-28 20:06:27
有關如何執行此操作的實際實現可能超出了此處答案的範圍。 – DanC 2013-02-28 20:11:43