使用构造函数实现弹跳动画？

Question

我想在鼠标悬停时给每根头发单独添加弹跳动画。动画部分已经在第一根头发上完成，但我不想给每张头发图片都添加事件。所以，我的问题是：我在我的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???

- user2412575

---

尝试使用jQuery动画。 - Dineshkani

给每根头发分配一个共同的类，将mouseover事件处理程序附加到该类。在事件处理程序中，使用$(this).id并使用该id进行动画处理。 - Harsha Venkataramu

我想让我的代码尽可能灵活。少即是多!!! - user2412575

是的，绝对没错！但我想要解决方案... - user2412575

如果您不想要10个不同的事件监听器（顺便说一下，这也不算太糟糕），那么您将不得不使用事件委托（搜索一下）。请注意，这与构造函数或原型继承毫无关系。 - Bergi

Answer 1

// one event listener for whole 'haircut'
document.getElementsByClassName('hair')[0].addEventListener('mouseover',
function(objEvent)
{
    var elImg = objEvent.target;
    if (elImg.nodeName == 'IMG')
    {
        objEvent.stopPropagation();
        console.log(elImg.getAttribute('id')); // just for debug
        // xxx.bounce(elImg) or whatever you want
    }
}, false);

- CoolCmd

Answer 2

您可以使用setTimeout来延迟反弹：

(function(){

    // "private" vars
    var delayPace = 100;// ms
    var instanceCount = 0;


    hair = function (){
        // don't need to return this if it's going 
        // to be instantiated via the new keyword
        this.delay = instanceCount * delayPace;
        instanceCount++;
    };


    hair.prototype={
        delay : 0,

        bounce : function(){
             this.stop();
             this._t = setTimeout(this._bounce, this.delay);
        },

        _bounce : function(){
            // this is were the actual magic happens
        },

        stop : function(){
            if(this.t){
                clearTimeout(this.t);
            }
            // other code to stop the animation
        }
    };
})();

// keep all your hairs in one place!
var hairs = [];

// instantiate them
hairs.push(new hair());
//...
hairs.push(new hair());

var onHover = function(){
    hairs.forEach(function(h){
        h.bounce();
    });
}

- gion_13