2

jQueryを使って水平スクローラーを作っています。以下を使用して動作させています

var wrapper = $('#wrapper'),
    content = $('#scroll-content');


wrapper.bind('mousemove', function(e){

    var wrapper_width = wrapper.width(),
        content_width = content.width();
        //wrapper and content width

    var tmp  = e.pageX * (content.outerWidth() - wrapper.outerWidth()) / wrapper.outerWidth();
    //calculate new left margin

    content.css({ 'margin-left': '-'+tmp+'px' });
    //set margin according

    /*content.animate({
        'margin-left': '-'+tmp+'px'
    }, 30, 'easeOutSine');*/
});

すべての mousemove イベントで、新しい左マージンを計算します。スライダーは画面の幅 100% にまたがります。

これは機能しますが、2 つの問題があります。何百ものイベントがあるため、すべての mousemove イベントで計算を呼び出すのは悪い習慣のようです。おそらくタイマーを使用して、より良い方法はありますか？

別の質問です。ユーザーが最初にスライダーをホバーしたときに、スライダーが正しい位置にスライドするようにアニメーションを使用しようとしましたが、うまくいかなかったようです。(一番下にコメントあり)

これらの問題の助けは素晴らしいでしょう。ありがとう

4

2 に答える 2

4

Ben Alman の Throttle Debounce プラグインを使用できます

そして、次のようにします。

$(document).ready(function() {

    var wrapper = $('#wrapper'),
        content = $('#scroll-content');

    wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));

    function mousemove(e) {
        var wrapper_width = wrapper.outerWidth(),
            content_width = content.outerWidth();
        //calculate new left margin
        var tmp = e.pageX * (content_width - wrapper_width) / wrapper_width;

        content.stop().animate({
            'margin-left': '-' + tmp + 'px'
        }, 'fast', 'easeOutSine');
    }
});

例: http://jsfiddle.net/petersendidit/RkbP6/1/

于 2011-02-24T01:42:11.383 に答える
1

スロットルに関しては、似たようなものを見たことがあると思いました。ジョン・レシグは、ツイッターの無限スクロールの問題についてブログを投稿しました。私は彼の解決策を以下で使用しました。

これが興味のある人のためのブログ投稿です。

http://ejohn.org/blog/learning-from-twitter/

$(document).ready(function() {

    var wrapper = $('#wrapper'),
        content = $('#scroll-content'),
        did_move = false,
        g_event;

    wrapper.bind('mouseenter mousemove', function(e) {
        did_move = true;
        g_event = e;
    });

    setInterval(function() {
        if (did_move) {
            did_move = false;
            //reset move bool
        }

        var wrapper_width = wrapper.outerWidth(),
            content_width = content.outerWidth();
            //update wrapper and content widths

        var tmp = g_event.pageX * (content_width - wrapper_width) / wrapper_width;
        //recalculate margin-left

        content.stop().animate({
            'margin-left': '-' + tmp + 'px'
        }, 'fast', 'easeOutSine');
        //animate into place.

    }, 150);
});
于 2011-02-24T13:11:34.603 に答える