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

     });

}

実際のフィドルを見る

于 2012-07-17T07:07:28.867 に答える