2

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

例如，假设这是我的清单：
1984
1985
1987
1990
1994

假设这些数字在屏幕上：

1985
1987
1990

当用户单击 1990 时，列表会向上滑动，将 1985 移出屏幕，而 1994 出现在屏幕上。留给我们：

1987
1990
1994

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

4

1 回答 1

2

我想有几种方法可以成功地做到这一点。就我个人而言，我只会在 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');
    });
});

有效，但它不在我的脑海中，可能有一种更顺畅的方式来做到这一点。

于 2012-09-24T15:12:51.587 回答