Question

我有一个5760像素宽，5400像素高度的精灵表，包含10行和6列，每行960像素宽，540像素高。精灵表中的所有精灵都是从左到右，从上到下排列的。我想使用CSS将60张图像作为动画播放，但我无法理解需要什么代码。有没有人有任何建议？

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();

协助CSS精灵表动画

1 个答案: