水平加速轮播滚动条

Question

我正在尝试创建一个与此类似的水平滚动条。 http://www.k2.pl/

我在这里做了一个原型。 http://jsfiddle.net/Uu3aP/1

我查看了轮播插件，但没有一个功能符合我的要求。

我只是好奇我是如何根据左右 x 位置执行速度计算的，并且可能对两侧使用缓动方法。

这是我目前所在的位置，我们将不胜感激。

HTML

<div id="scroll">
<div id="scrollContainer">
<ul>
    <li><img src="http://placehold.it/350x350" alt="" /></li>
    <li><img src="http://placehold.it/350x350" alt="" /></li>
    <li><img src="http://placehold.it/350x350" alt="" /></li>
    <li><img src="http://placehold.it/350x350" alt="" /></li>
    <li><img src="http://placehold.it/350x350" alt="" /></li>
</ul>
</div>

CSS

body {
    margin: 0;
}
#scroll {
    width: 100%;
    overflow: hidden;
}
#scrollContainer * {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

JAVASCRIPT

$(document).ready(function() {

    var $totalwidth = 0;
    var $paneTarget = $('#scroll');
    var $paneContainer = $('#scrollContainer');
    var $this = $(this);
    var $w = $this.width();

    $paneTarget.find('li').each(function() {
        $totalwidth += $this.width();
        $paneContainer.width($totalwidth);
    });

    $paneTarget.on('mousemove', function(e) {
        if ((e.pageX) < $w / 2) {
            $paneTarget.stop().scrollTo( {top:'0', left:'-=100'}, 200, {easing: 'linear'});
        } else if ((e.pageX) > ($w / 2)) {
            $paneTarget.stop().scrollTo( {top:'0', left:'+=100'}, 200, {easing: 'linear'});
        }
        else {
            $paneTarget.stop();
        }
    });

});

Answer 1

我用你的小提琴演奏了一下，想出了这个：Fiddle

我没有使用 scrollTo 插件或 jQuery 的动画，而是创建了一个使用 setInterval 调用的自定义动画方法。

// This gets called from the setInterval and handles the animating
function animationLoop() {
    var dx = targetX - posX,    // Difference
        vx = dx * EASING;       // Velocity

    // Add velocity to x position and update css with new position
    posX += vx;
    $paneContainer.css({left: posX});             
}

targetX 在 mousemove 处理程序中得到更新

// Calculate the new x position for the scroll container
targetX = Math.round((event.pageX / windowWidth) * maxScroll);

[编辑]
要处理窗口大小调整，您基本上只需要重置 windowWidth 和 maxScroll 变量：

$(window).on('resize', function() {
    windowWidth = $(window).width();
    maxScroll = -(containerWidth - windowWidth);

    // OPTIONAL:
    // Move scrollpane to original position on resize
    targetX = 0;
    // Start animating if it's not already
    // Probably better in a new function: duplicate code from mousemove..
    if (!animInterval) {
        animInterval = setInterval(animationLoop, 1000 / FPS);
    }
});

Updated jsfiddle