協助CSS精靈表動畫

Question

我有一個精靈表是5760像素寬度5400像素高度包含10行和6列每個是960像素寬度540像素高度。精靈表中的所有精靈都是從左到右，從上到下排列的。我想把60張圖片作爲一個可能使用CSS的動畫來播放，但我很難理解需要什麼代碼。有沒有人有什麼建議？

Answer 1

最簡單的解決方案是按順序分配CSS類的背景位置更改。

即。

.class1{background-position:0,0} // top left 
.class2{background-position:-960px, 0} // indent by 960 
// go to .class6 minus 960 to first px value 
.class7{background-position:0,540px} // got to left of 2nd row 
.class8{background-position:-960px,-540px} // got to left of 2nd row 
// keep going for 10 rows, minus 540 per row and 960 per col 

然後在JavaScript（用jQuery）

var viewarea = documentGetElementByID('my_window'); // id of DIV 
var counter = 0; 
var speed = 300; // miliseconds between frame change 

function loopAnimation(){ 
    // remove old frame 
    if($(viewarea).hasClass("class"+counter){ 
    $(viewarea).removeClass("class"+counter); 
    { 
    // change counter 
    if(counter == 60){ 
    counter = ; 
    }else { 
    counter++; 
    } 
    // move to next frame 
    $(viewarea).addClass("class"+counter); 
    // set animation to do another frame 
    var t = setTimeout(function(){loopAnimation();}, speed); 
} 
// begin animation 
loopAnimation();