1

我有一个要旋转的 li 元素的垂直列表，使其显示在滚轮上（如老虎机上的图标或密码锁上的数字）。我可以通过简单地添加以下内容来创建它：

$('#list li:first').before($('#list li:last'));

问题是有时列表正是可见元素长度的数量，而我想保留的是最后一个元素从底部滑落并同时滑到顶部以创建圆形列表的外观。一个想法是如果列表元素的长度小于可见长度，则复制列表元素，并为每个 li 元素的 margin-top 属性设置动画以向下滑动，但是我有每个列表元素的重复项，有没有更好的方法？

任何帮助，将不胜感激。

编辑：基于 Alex Ball 下面的响应的旋转函数。

function rotate(direction){
    var firstElem = $('#list ul li:first');
    var lastElem = $('#list ul li:last');
    var elemHeight =  firstElem.height();

    if(direction == 'down') {
        firstElem.animate({'marginTop': '+=' + elemHeight + 'px'}, 500, 'linear', function(){
            $(this).css({'margin-top':0}).before(lastElem);         
        });
    }

    if(direction == 'up') {
        firstElem.animate({'marginTop': '-=' + elemHeight + 'px'}, 500, 'linear', function(){
            lastElem.after($(this));
            $(this).css({'margin-top':0});
        });
    }
}
4

1 回答 1

1

这是一个例子（我使用了老虎机的想法，因为它很漂亮）

我从一些 div 容器和图像列表 (li) 开始，但这个想法对其他类型有效。

死记硬背的JS：

function rotate(id, n){

    console.log(id);    

     $('#'+id+' ul li:first').animate({'margin-top': '-='+$(this).height()+'px'}, 400, 'linear', function(){

          $(this).css({'margin-top':0}).parent().append($(this));

          i++;

          console.log('id: '+id+' i: '+i+' n: '+n);

          if(i < n) rotate(id, n);

     });

}

见实际操作FIDDLE

于 2012-07-17T07:07:28.867 回答