在頁面中包含所有CSS精靈類

我已將FamFamFam Silk圖標設置爲精靈，並且我想要在HTML頁面上顯示所有圖標。問題是，有1000個圖標分成2個.png圖像，每個圖像都有自己的類。例如，第一個圖標應該是class="silk1 ad-accept"，而第二個.png圖像中的最後一個圖標應該是class="silk2 ad-zoom-in"。無論如何，試圖手工完成它們，更不用說花費的時間和可能的錯誤，這將是瘋狂的。在頁面中包含所有CSS精靈類

我的問題是，這可以通過jQuery自動完成嗎？基本上，我需要一個腳本，它將採用每個CSS sprite類，並將其應用於像li這樣的元素。如果它也會對所使用的類應用標題將會非常有幫助，所以我知道哪個圖標是哪個圖標。

來源

2012-02-19 Alex N

你能重新閱讀你的問題，修復任何錯別字，使之更加清晰。「例如，第一個圖標是???，最後一個圖標???在第二個.png圖像中是???。」 – 2012-02-19 18:11:15

如果你有一個格式的類名，你可以讀/解析（例如逗號分隔的文本，JSON格式的數組等等），它們與哪個'silk1'或'silk2'當然，我不明白你爲什麼做不到這一點。 – 2012-02-19 18:11:53

@亞當林奇，對不起，我刪除了HTML標記，它對我顯示OK。 – 2012-02-19 18:18:47

您可以使用jQuery的addClass方法將類添加到任何您想要的元素。

$(function(){ 
    $(#ads li).addClass('silk1 ad-accept'); 
});

然而，你真的在你的網站中使用所有1000個圖標嗎？如果您使用的只是少數圖標，那麼這似乎是一個很大的開銷。從理論上講，精靈的表現會更好，因爲請求的數量更少，但對於8k大小的圖標，5個請求比1個800k精靈的請求快得多。你可能想考慮的東西...

來源

2012-02-19 18:32:26

那麼，我正在處理的網站是作爲一個模板，所以我需要給買家儘可能多的選擇，其中包括儘可能多的圖標，可能需要。但是，圖像被壓縮，所以它們都加起來312KB，這不是那麼糟糕恕我直言。 – 2012-02-19 18:45:55

這是你以後的事情嗎？

for (var i = 0; i < document.styleSheets.length; i++) { 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) { 
     var rule = styleSheet.cssRules[j]; 
     if (/^\.silk\d+\./.test(rule.selectorText)) { 
      var classNameParts = /\.(silk\d+)\.(.*)$/.exec(rule.selectorText); 
      var element = document.createElement('DIV'); 
      element.className = classNameParts[1] + ' ' + classNameParts[2]; 
      element.appendChild(document.createTextNode(element.className)); 
      document.body.appendChild(element); 
     } 
    } 
}

例子： http://jsfiddle.net/ddAcY/

來源

2012-02-19 18:41:48

當我在網站上實現它時，它不起作用。 – 2012-02-19 20:09:30

你能定義「不工作」多一點嗎？你能提供一個你的CSS文件的例子嗎？也許你已經實現了代碼？ – 2012-02-19 22:46:39

該CSS看起來像這樣：.silk1 {background：url（../ img/silk1.png）; }和每個圖標.ad-i-accept {background-position：xxx xxx; }。我的意思是不起作用的是我把它放在$（document）.ready（）上觸發的jQuery腳本文件中，並沒有任何反應。在控制檯中什麼都沒有...... – 2012-02-20 05:06:54

在頁面中包含所有CSS精靈類

回答

相關問題