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％。

这有效，但我有两个问题。在每个mousemove事件上调用计算似乎是不好的做法，因为有数百个。有没有更好的方法，也许使用计时器？

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

对这些问题的任何帮助都会很棒。感谢

Answer 1

您可以使用Ben Alman's Throttle Debounce plugin

然后做这样的事情：

$(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发布了一篇关于twitters无限滚动问题的博客。我在下面使用了他的解决方案。

以下是感兴趣的人的博文。

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

jQuery水平滚动显示

2 个答案: