jQuery水平滚动显示

Question

我正在使用 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% 宽度。

这可行，但我有两个问题。对每个鼠标移动事件调用计算似乎是不好的做法，因为有数百个事件。有没有更好的方法，也许使用计时器？

另一个问题，当用户第一次悬停滑块时，它会跳到位，我尝试使用 animate 以便滑块向下滑动到正确的位置，但似乎不起作用。 （在底部评论）

任何解决这些问题的帮助都会很棒。谢谢

Answer 1

您可以使用 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/

Answer 2

我知道我在节流方面也见过类似的情况。 John Resig 发表了一篇有关 Twitter 无限滚动问题的博客。我在下面使用了他的解决方案。

这是任何感兴趣的人的博客文章。

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);
});