當鼠標懸停在另一個div上時，在多個圖像之間進行切換（使用css sprite）

Question

我使用jQuery在幾個圖像之間切換。代碼如下：

var imgs=['img/image01.png', 
    'img/image02.png', 
    'img/image03.png', 
    'img/image04.png']; 
var $img = $('#toons'); 

$('#logo').on('mouseover', function() { 
    var current = imgs.indexOf($img.attr('src')); 
    $img.attr('src', imgs[++current] || imgs[0]); 
}); 

HTML：

<img id="toons" src="img/image01.png" /> 

隨着每懸停在DIV＃標誌形象的變化來回。雖然這很好，但我想知道是否可以在我的樣式表中使用CSS精靈和背景圖像實現同樣的效果，只需一張畫布就能顯示出我需要的4幅圖像。我想這是可能的，但我無法弄清楚。如果有人能幫忙，我會很感激。

Answer 1

讓我們從一個簡單的圖形開始，它只是一個「數字條」。這是一個很好的形象來展示你所問​​的概念，最重要的是，我已經創建了它。這是...

numbers http://www.secretagentorange.com/_test/numbers.png

此圖片是通過合併六個獨立的40×40的圖標製作。我使用PS Elements來完成它，但GIMP或許多其他圖像編輯器可以完成這項工作。我們的單個位圖由六個單獨的圖像組成，稱爲「精靈」。我們要做的是通過調整background-position-x CSS屬性（並確保我們的「光圈」或顯示窗口只有足夠的大小以顯示一個精靈），來操縱圖像一次只顯示一個精靈。

鑑於以下的javascript：

$('#logo2').on('mouseover', function() { 
    var current2 = $('#toons2').css("background-position").split(" "); 
    current2[0] = parseInt(current2[0].replace("px", ""), 10); 
    current2[0] = ((current2[0] > -120) ? current2[0] - 40 : 0); 
    $('#toons2').css("background-position", current2[0] + "px 0") 
}); 

和HTML：

<div id="toons2"></div> 
<div id="logo2">hover2</div> 

和CSS：

#toons2 { 
    width: 40px; 
    height: 40px; 
    background: transparent url('img/image01.png') no-repeat; 
    background-position: 0 0; 
} 

那麼我們可以期待我們每次鼠標移到DIV＃LOGO2背景div＃toons2的圖像將被更改。 （在這種情況下，前四個圖標將按順序顯示並重復。）

div＃toons2的高度和寬度很重要：它必須與單個精靈（40x40）的精確高度和寬度相匹配。因此，如果我們有一個單獨的精靈組合圖形，例如寬度爲35像素，高度爲90像素，那麼我們需要設置div＃toons2的高度和寬度，寬度爲35，高度爲90.這是都非常簡單。

至於我們的JavaScript，所有我們正在做的是通過調整每次我們懸停時-40像素的背景位置x的值，因爲這是每個精靈的寬度。最初，我們看到...

one http://www.secretagentorange.com/_test/number1-open.png

現在，我們第一次鼠標移到我們將-40像素調整我們的「數條」的x位置，有效地設置DIV＃toons2爲CSS ...

background-position: -40px 0; 

這將產生...

two http://www.secretagentorange.com/_test/number2-open.png

下一次我們鼠標，backgroundPositionX WIL我是-80px，這將顯示爲...

three http://www.secretagentorange.com/_test/number3-open.png

最後，在設置背景位置-X到-120px顯示圖像中的第四個圖標，即...

four http://www.secretagentorange.com/_test/number1-closed.png

讓我們來看看的JavaScript。此行：

var current2 = $('#toons2').css("background-position").split(" "); 

獲取div＃toons2的X和Y backgroundPosition值。

在我們的例子中，我們只關心與X值，如下所示：

current2[0] = parseInt(current2[0].replace("px", ""), 10); 

這裏，我們抓住了第一個指數，剝出任何預期後綴和字符串轉換爲整數。現在我們有數字值了，我們可以很容易地操作它。

在我們的示例中，我們必須將圖形向左移動40個像素以顯示每個後續精靈，因此我們將從整數中減去40來做到這一點。但由於我們只希望看到四張圖像，爲了與海報的原始狀態保持一致，我們檢查以確保我們不會太過分。如果我們已經顯示了第四個精靈，我們會將X值重置爲零。下一行做到這一點：

current2[0] = ((current2[0] > -120) ? current2[0] - 40 : 0); 

我們的新X值已經到了，我們只需要將其插入backgroundPositionX屬性：

$('#toons2').css("background-position", current2[0] + "px 0") 

，我們創建一個定義新值的字符串。 （第二個參數'0'是不需要更改的Y位置。）

就是這樣。

這是fiddle (http://jsfiddle.net/UxKyY)。它包括原始條件以及建議的解決方案。