1

私はmooToolsの使用に慣れていません。PrototypeJSによく似ています。これをすべてのクラスにバインドする方法を教えてもらえますか？

// 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));
4

1 に答える 1

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();
    }
});
于 2013-03-26T14:37:57.997 に答える