JavaScript-模拟轮子/UIPicker

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

例如，让我们假设这是我的列表：
1984年
1985年
1987年
1990年
1994年

假设这些数字出现在屏幕上：

1985年
1987年
1990年

当用户点击1990时，列表会向上滑动，使1985从屏幕上消失，而1994在屏幕上出现。留给我们的是：

1987年
1990年
1994年

---

然后，当用户单击1994时，列表再次向上滑动，1987离开屏幕，1984出现在屏幕上。或者，列表也可以向下滑动。。。那么，实现这一目标的首选方式是什么？我已经讨论了一个和一组超大的图像（应该在一个较小的div内，以限制其在屏幕上的部分），每个组合可以上下滑动，然后换成新的组合，为下一个选择做好准备。

我想有很多方法可以成功做到这一点。就我个人而言，我会在jqueryanimate上有一个回调，它使用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');
    });
});

---

工作正常，但这是我脑子里想不出来的，可能有一种更平滑的方法。

最后在这方面做了一点改动$（“#largeDateContainer”）.animate（{top::-=42}，1000，function（）{$（'ul#datesList li:first'）。appendTo（'ul#datesList'）；$（“#largeDateContainer”）。animate（{top:+=42}，0）}）；