更改後臺位置中的「x」：「x」px「y」px使用jQuery/Javascript的一類

我剛開始使用精靈來減少HTTP請求，並且我有一點點轉換我的舊腳本處理我的懸停動畫到新系統中的問題。我並不想爲每個按鈕設置一個單獨的功能，因爲這對於按鈕數量來說尤其痛苦，即使複製和粘貼也是一種痛苦。我不相信這是最有效的做事方式，而不是一個長遠的目標，效率是目標。更改後臺位置中的「x」：「x」px「y」px使用jQuery/Javascript的一類

，我與它遠獲得這樣的：

$(".socButton").hover(function(){ 
     var iD = $(this).attr("id"); 

     var pos = $("#" + iD).css("background-position"); 

     var splitPos = pos.split("px"); 

     splitPos[0] = parseInt(splitPos[0]) += 24; 

     newPos = splitPos.join("px"); 

     alert(newPos); 

}, function(){ 

});

但newPos變量只是不報警。我嘗試了一些更簡單的方法來改變「background-position-x」，但沒有骰子。

我不確定我需要識別元素的ID以便更改它，但它是在樣式表中具有背景位置的id，而不是類，所以我不太確定。

任何指導非常感謝。

在此先感謝。

編輯：我覺得我也應該指出，在我添加parseInt之前它已經很好地警覺了，但是在我添加之前會發生一些令人驚訝的結果。

來源

2012-01-13 Richie

你怎麼想進一步補充的嗎？你只是警惕newPos和多數民衆贊成它？ – 2012-01-13 15:06:32

在這一點上，我只是想提醒它，所以我可以看到它是否正常工作，但最終我會將「背景位置」更改爲newPos – Richie 2012-01-13 15:08:08

下面的答案，但+ =與parseInt是什麼導致你的問題。 – Archer 2012-01-13 15:24:51

不，您不需要該元素的ID。 jQuery應用內聯樣式。

無論如何，如果您的CSS中有.socButton的第二條規則，例如.socButton.hover，它可能會更容易，該規則對於懸停狀態具有正確的背景位置。在jQuery中，你只需要用$(this).toggleClass('hover')來切換hover類。

http://jsfiddle.net/Rn6f4/

$(".socButton").hover(function() { 
    var pos = $(this).css("background-position"); 

    var splitPos = pos.split("px"); 

    splitPos[0] = parseInt(splitPos[0]); 
    splitPos[0] += 24.0; 

    newPos = splitPos.join("px"); 

    alert(newPos); 
    $(this).css({"background-position": newPos}); 

}, function(){ 

});

來源

2012-01-13 15:21:07 bububaba

這很棒，很棒。雖然不知道你的建議，但我不知道你如何能夠用精靈來做到這一點，而不必爲每一個按鈕做一個單獨的（儘管較短）的腳本。 – Richie 2012-01-13 15:40:59

更改後臺位置中的「x」：「x」px「y」px使用jQuery/Javascript的一類

回答

相關問題