哪個更有效，spritesheet或css類

我想在用戶點擊它時在div上實現反饋。 div會很快褪色成另一種顏色，然後再次回到原來的顏色。哪個更有效，spritesheet或css類

我的第一個選擇是使用spritesheet，在那裏我會改變div的背景位置屬性。實施部分看起來像這樣：

pos = 0; 
function fadeAction(el){ 
    if (pos != 100){ 
    pos += 10; 
    $(el).css("background-position","0% "+pos+"%"); 
    setTimeout(function(){fadeAction(el);},10); 
    }else 
     pos=0; 
    }

我的第二個選擇是根據顏色陣列來改變背景顏色：

colors = ["#FF00FF","#443322", etc]; 
i = 0; 
function fadeAction(el){ 
    if (pos != 10){ 
    i += 1; 
    $(el).css("background-color",colors[i]); 
    setTimeout(function(){fadeAction(el);},10); 
    }else 
     i=0; 
    }

我的第三個選項（其將由於設備被廢棄不兼容）是使用jquery.color。

function fadeAction(el){ 
    $(el).css("background-color",fadeColor); 
    $(el).animate({ 
    backgroundColor: "#E9E9E9" 
    }, 150);

}

這兩個方法（報廢第三）將我們最有效的？頁面上會有多個按鈕（div）將使用此功能，它主要用於帶有webkit瀏覽器的移動設備。

來源

2014-02-06 Morne

你還想過使用css-transitions或動畫嗎？ – markusthoemmes

如果只是顏色，爲什麼你需要spritesheet？比CSS類更難以改變。此外，CSS動畫（僅適用於現代瀏覽器）比JS效果更快 – Raptor

我沒有考慮過css轉換，我現在就去閱讀它 – Morne

最佳性能是用CSS3實現的。這是因爲它的瀏覽器使用硬件加速。

編輯：我錯了（thanx Zougen Moriver）它不會自動觸發（見評論），但它仍然better performance over the javascript solutions。

下面是一個例子：

.test { 
    height: 100px; 
    width: 100px; 
    background-color: #eee; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    } 
.test:hover { 
    background-color: #fc3; 
}

http://jsfiddle.net/Vandeplas/LZNZb/

我用懸停，因爲它並不需要JavaScript的，但如果你改變了顏色（通過JavaScript，通過添加類或改變風格）它會褪色到那種顏色。

的缺點是，它isn't supported on legacy browsers ..

下面是使用上的點擊處理程序的例子：

$('.test').on('click', function() { 
    $(this).css('background-color', 'green'); 
    //$(this).addClass('otherColor'); 
});

http://jsfiddle.net/Vandeplas/LZNZb/1/

正如你可以看到我使用註釋掉的另一種選擇該類...兩者都會工作...

來源

2014-02-06 10:11:29 VDP

這是一個將在Android webview中使用的小部件的一部分，因此舊式瀏覽器並不是我的大問題。感謝您的回答 – Morne

我會如何做點擊過渡？ – Morne

剛剛看到你編輯過你的帖子。謝謝 – Morne

如果你只是changin g平原顏色，CSS樣式選項將比spritesheets更高效。瀏覽器不需要爲你的Spritesheet創建一個額外的HTTP請求，並且使用CSS轉換，你將能夠在顏色之間淡入淡出。

設備內存中也會少一個資源。

過渡色彩，應用此CSS：

.yourElement { 
    -webkit-transition: color 150ms; 
    transition: color 150ms; 
}

..和繼續使用您的JavaScript來打開點擊的顏色變化。

來源

2014-02-06 10:13:47

哪個更有效，spritesheet或css類

回答

相關問題