1

我正在根据这个先前的问题开发一个功能。

但是，如果滚动开始缓慢而迅速地加速会很好，但似乎不可能使用动画功能中可用的缓动，因为当用户按住下一个/上一个按钮时，它会被多次触发。

任何人都知道如何实现这一目标？

谢谢 ：）

现在使用 JSFiddle：http: //jsfiddle.net/4YJPG/4/

其他相关问题，如果时间轴 div 可以在宽度可变的新项目添加到右侧时动态更新宽度，那么确保滚动到达任一端后可靠停止的最佳方法是什么？

更新：带有代码的 JSFiddle 停止时间轴 div 滚动到末端（希望具有动态宽度）：http: //jsfiddle.net/eFFKU/4/

4

2 回答 2

1

如果您更改元素的宽度或在时间轴中添加/删除一些新元素，此解决方案不会中断。

这是工作的jsFiddle。

var liWidth = $('#timeline ul li').outerWidth(true);
//this calculates element's width with their margins/paddings/borders
var liTotal = $('#timeline ul li').index()-9;
//need to descry first seen li's from calculation for true value of MaxRange
var MaxRange = ( liTotal  * liWidth ) * -1;

$('.prev').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= 0  && current > MaxRange ) {
        $timeline.stop(false,true).animate({'right':'-='+liWidth+'px'},1000);
    }
});

$('.next').click(function(){
    var current = parseInt($('#timeline').css('right'));
    if ( current <= -1 ) {
        $timeline.stop(false,true).animate({'right':'+='+liWidth+'px'},1000);
    }
});

如果你想完美地做到这一点：你需要添加另一个 if 条件；当左移和右移按钮被点击并且不同的值被添加到 $timeline 的右 css 时，这个按钮不会完美地滑动。

您可以编写一个等式，将当前右侧的值除以 50/liWidth，如果它不可除，您可以重置时间线，然后再次初始化 next/prev 函数。

于 2012-08-23T10:32:19.390 回答
1

这并不难。就这样做吧。在 onClick（左/右）上绑定一个函数，如下所示

var val=5; 

setInterval(function() {
    val++;
}, 100);

并将 '-+10px' 替换为 val ，这样它就会开始缓慢并快速移动。您需要考虑的是将 val 转换为字符串并 concat 'px' 并将限制设置为 val ex: 30

于 2012-08-23T10:05:07.013 回答