我想在鼠标悬停时给每根头发单独添加弹跳动画。动画部分已经在第一根头发上完成,但我不想给每张头发图片都添加事件。所以,我的问题是:我在我的JavaScript代码中使用了构造函数。我能否在原型中创建一个方法并对其进行实例化?基本上,我不想触发10个事件或10个addEventListeners,我想找到一个更聪明的解决办法。如何完成我的任务,即每根头发应该仅在自身上的鼠标悬停时弹跳。
我的代码: HTML:
<div class="main">
<div class="hair">
<img src="images/single.png" id="hair1" width="13" height="40" >
<img src="images/single.png" id="hair2" width="13" height="40">
<img src="images/single.png" id="hair3" width="13" height="40">
<img src="images/single.png" id="hair4" width="13" height="40">
<img src="images/single.png" id="hair5" width="13" height="40">
<img src="images/single.png" id="hair6" width="13" height="40">
<img src="images/single.png" id="hair7" width="13" height="40">
<img src="images/single.png" id="hair8" width="13" height="40">
<img src="images/single.png" id="hair9" width="13" height="40">
</div>
<div class="face">
<img src="images/ec_logo.png">
</div>
Javascript:
(function(){
hair=function (){
return this;
};
hair.prototype={
bounce:function(){
//code for some bounce animation
}
};
})();
document.getElementById('hair??').addEventListener("mouseover",???,false);????????//this is the part i am confused about,how to give same animation to every single hair by using object instances???