Question

我有六个气球的图像，我希望每个图像在用户单击时都完全停止。我做了一些测试，但似乎没有用。我不确定自己在做什么错。当用户单击图像时，我希望javascript函数将动画类应用于摆设。当我单击图像时，似乎什么也没发生。

    var elems = document.getElementsByClassName("bauble");
function test(idtest) {
    for(var i=0;i<elems.length;i++){
         elems[i].classList.add("animation");
     }

}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animattion {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>

Answer 1

这将根据您的问题进行。

function test(idtest) {
var elems = document.getElementById(idtest);
  elems.classList.add("animation");
}

.bauble {
  z-index: 3;
}

#red {
  left: 42px;
  top: 341px;
}

#blue {
  left: 113px;
  top: 226px;
}

#green {
  left: 425px;
  top: 211px;
}

#orange {
  left: 604px;
  top: 281px;
}

#darkblue {
  left: 300px;
  top: 276px;
}

#pink {
  z-index: 1;
  left: 400px;
  top: 330px;
}

.animation {
  animation-name: bounce;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 500px, 0);
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 300px, 0);
  }
}

<div id="container">
  <!-- baubles -->
  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />
  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />
  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />
  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />
  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />
  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" />

</div>

Answer 2

我通过遍历所有球来解决它

var elems = document.getElementsByClassName("bauble");
function test(idtest) {
    for(var i=0;i<elems.length;i++){
        if(idtest=="red") {
            elems[0].classList.add("animation");
        }else if(idtest=="pink"){
            elems[1].classList.add("animation");

        }else if(idtest=="green"){
            elems[2].classList.add("animation");
        }else  if(idtest=="orange"){
            elems[3].classList.add("animation");

        }else if(idtest=="blue"){
            elems[4].classList.add("animation");
        }else if(idtest=="darkblue"){
            elems[5].classList.add("animation");
        }
     }

}

气球/图像落在点击上

2 个答案: