jQuery的横向滚动显示 [英] jQuery horizontal scrolling display

问题描述

我正在使用jQuery横向卷轴。我有工作使用以下

I'm making a horizontal scroller using jQuery. I have it working using the following

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

Every mousemove event I calculate the new left margin, the slider spans 100% width of the screen.

这工作，但我有两个问题。这似乎不好的做法，被调用作为有上百每mousemove事件的计算。有没有更好的办法，也许使用定时器？

This works, but I have two problems. It seems bad practise to be calling a calculation on every mousemove event as there are hundreds. Is there a better way, maybe using timers?

另一个问题，当用户第一次悬停它跳跃到位滑块，我试图用动画，使滑块将下降到正确的位置滑动，但似乎没有工作。 （底部评论）

Another question, when the user first hovers the slider it jumps into place, I tried to use animate so that the slider would slide down to the correct position, but didn't seem to work. (commented at the bottom)

这些问题的任何帮助将是巨大的。谢谢

any help with these problems would be great. Thanks

推荐答案

您可以使用本Alman的油门防抖插件

然后做这样的事情：

$(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/

这篇关于jQuery的横向滚动显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！