jQuery的圆形列表动画

我有一个列表元素的垂直列表，我想旋转，使它看起来像滚子上（像老虎机上的图标或组合锁上的数字）。我可以通过简单地添加类似创建此：jQuery的圆形列表动画

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

问题是有时列表恰恰是在长度可见元素的数量，我想保留是滑落底部，同时滑动到最后一个元素顶部创建一个循环列表的外观。一个想法是复制列表元素，如果它的长度小于可见长度并将每个li元素的margin-top属性设置为向下滑动，然后我有每个列表元素的重复项，那么有没有更好的方法？

任何帮助，将不胜感激。

编辑：旋转函数基于亚历克斯鲍尔的回答如下。

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}); 
     }); 
    } 
}

来源

2012-07-17 adamK

这是一个例子（我用的老虎机的想法，因为是芬妮）

我开始用图片的一些DIV容器和列表（LI），但这个想法是有效的其他类型。

的rotete 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-17 07:07:28

喜欢你的风格。非常感谢，效果很好。将追加我的结果旋转功能的原始帖子。仍然无法避免必须在较小的列表中复制元素，但旋转功能是完美的。 – adamK 2012-07-17 22:50:37

@NinjaPants谢谢....我很高兴能够有用;-) – 2012-07-18 05:58:45

jQuery的圆形列表动画

回答

相关问题