jQuery水平滚动显示答案

【问题标题】：jQuery horizontal scrolling displayjQuery水平滚动显示
【发布时间】：2011-02-23 22:09:12
【问题描述】：

我正在使用 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 事件调用计算似乎是一种不好的做法，因为有数百个事件。有没有更好的方法，也许使用计时器？

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

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

【问题讨论】：

想要的动画是什么？持续滚动或滚动某些事件？
不是跳到正确的位置，我只是想让它滚动到正确的位置，我在这里创建了一个小提琴jsfiddle.net/letsgojuno/RkbP6

标签： jquery animation horizontal-scrolling

【解决方案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/

【讨论】：

太棒了，这正是我要找的，我知道我以前见过一个节流插件，只是不记得在哪里。谢谢彼得森

【解决方案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);
});

【讨论】：