2013-02-28 63 views
0

我遇到this網站,並且想要實現類似於圖片更改徽標的事情,同時鼠標正在移入我自己的網站。我不確定它是否使用jQuery作爲頁面源代碼有點令人困惑,有沒有辦法讓我在javascript中做到這一點?在javascript中移動mousemove上的圖片

+0

使用jQuery鼠標懸停事件來更改圖像的src – 2013-02-28 20:06:27

+0

有關如何執行此操作的實際實現可能超出了此處答案的範圍。 – DanC 2013-02-28 20:11:43

回答

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