JavaScript - 模拟一个轮子/UIPicker

Question

我正在讨论几种模拟“价格合适”类型轮或样式 UIPicker 功能的方法。也就是说，我不需要 UIPicker 插件的整个对话框和配色方案。我只需要能够通过几个图像制作动画来复制轮子的旋转。

举个例子，这是我的列表:
1984
1985
1987
1990
1994 年

假设这些数字显示在屏幕上:

1985
1987
1990 年

当用户点击 1990 时，列表会向上滑动，使 1985 离开屏幕，而 1994 出现在屏幕上。留给我们:

1987
1990
1994 年

然后，当用户单击 1994 时，列表再次向上滑动，1987 离开屏幕，1984 出现在屏幕上。或者，列表也可以向下滑动……那么完成此操作的首选方法是什么？我争论过一个 infinite scroller和一组超大图像(将在较小的 div 内以限制它的屏幕部分)用于每个可以向上/向下滑动的组合，然后换出新组合并为下一个选择做好准备。

Answer 1

我想有几种方法可以成功做到这一点。就我个人而言，我只会在 jQuery animate 上有一个回调，它使用 insertAfter 获取第一个元素并将其附加到末尾，同时还修改列表的相对位置。这行得通并且只有几行代码，但这取决于您希望它有多流畅。

类似于:

var $length = $('.list li').length--;
$('#foo').click(function(){
    $('.list').animate({
        top:'-30px'     
    },function(){
        $('.list li').eq(0).insertAfter($('.list li').eq($length));
        $('.list').css('top','0px');
    });
});

可行，但它不在我的脑海中，可能有更流畅的方法。