Question

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

我查看了旋转木马插件，但没有任何功能我想要的。

我只是好奇我如何根据左右两侧的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

水平加速旋转木马卷轴

1 个答案: