-1

1 つの DIV の例があります。でも今はもっとコウモリが必要です。すべてのbats = getElementsByClassName( "bat")に対して1つのsetIntervalを作成するにはどうすればよいですか?

var bat = document.getElementByID("bat");
function batAnimation(bat) {
  var frame = Math.floor(Math.random() * 4) + 1;
  switch (frame) {
    case 1:
      bat.style.backgroundPositionX=0;
      break;
    case 2:
      bat.style.backgroundPositionX=10;
      break;
    case 3:
      bat.style.backgroundPositionX=20;
      break;
    case 4:
      bat.style.backgroundPositionX=30;
      break;
  }
}
setInterval(batAnimation, 50);
4

1 に答える 1

1

これを試して：

    var bats = document.getElementsByClassName("bat");
    function batAnimation(bat) {
      var frame = Math.floor(Math.random() * 4) + 1;
      for(var i=0; i< bats.length;i++){
        bats[i].style.backgroundPositionX=(frame-1)*10;
      }
    }
    setInterval(batAnimation, 50);

説明:ここで、bats はすべての div 要素の配列です。for ループを使用してトラバースし、それぞれに backgroundPositionX を割り当てています。

getElementsByClassName はすべてのブラウザーで機能するとは限らないため、利用できない場合は関数を追加します

if(!document.getElementsByClassName){
 document.getElementsByClassName(clasName){
  var parent = document;
  var elements = parent.getElementsByTagName('*');
  var matching = [];
  for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
      matching.push(elements[i]);
    }
  }
  return matching;
 }
}
于 2012-09-03T19:03:26.303 に答える