mooTools绑定所有类

时间:2013-03-25 18:15:52

标签: mootools

我不习惯使用mooTools,它看起来很像Prototype JS。谁能告诉我如何将它绑定到每个班级?

// This grabs all the classes
var mousy = $$('.hf-item-images');

// I don't think this is correct to apply this scroller to all the above classes
var scroll = new Scroller(mousy, {area: 100, velocity: 1});

// Mousemove
mousy.addEvent('mouseover', scroll.start.bind(scroll));
mousy.addEvent('mouseout', scroll.stop.bind(scroll));

1 个答案:

答案 0 :(得分:5)

你需要更加聪明,循环使用nnnn项目使scoller成本高昂。所以在每一个上都附加了一对事件。

给出这样的标记:

<div id="container">
    <div class="hf-item-images">...</div>
    <div class="hf-item-images">...</div>
</div>

您可以委托父项上的内容,只在需要它的元素上实例化一个滚动条实例,然后再重复使用它。

var container = document.id('container'),
    settings = {
        area: 100,
        velocity: 1
    };

container.addEvents({
    'mouseover:relay(.hf-item-images)': function(e, el){
        var scroll = el.retrieve('scroller');
        if (!scroll){
            // create instance the first mouseenter and store for later
            scroll = new Scroller(el, settings);
            el.store('scroller', scroll);
        }
        scroll.start();
    },
    'mouseout:relay(.hf-item-images)': function(e, el){
        el.retrieve('scroller').stop();
    }
});