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% 宽度。

这有效，但我有两个问题。对每个 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

我知道我在节流方面看到过类似的情况。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);
});
于 2011-02-24T13:11:34.603 回答