js と CSS3 でカード回転切り替え効果を実現

この記事では、カードの回転切り替え効果を実現するための js CSS3 を詳しく紹介します。興味のある方は参考にしてください。

切り替え効果については、中央のカードが最も多く見られます。左または右にスワイプして別の効果に切り替えます。今日は CSS3 を使用してこの効果を実現します。

まずデモを見てみましょう。特定のスタイルを自分で調整できます:

(PC ではボタンをクリックしてスイッチをオンにすることができ、携帯電話では左右にスライドできます)

この効果からわかるように、5つのPは左右に切り替えることができ、切り替えるたびに、中央の目立つ位置に1つ表示されます。切り替える際にpの移動とDOMの追加・削除を行っているようです。しかし、要素を調べてみると、DOM 要素の位置が変わっていないことがわかります。各要素のクラスを切り替えただけなので、ページ上の位置が変わっているように見えます。

実際、原則は次のとおりです。DOM を追加または削除せずに、位置内の各 p に特定のスタイルを記述し、各 p に対して絶対位置決めを実行してから、スタイルを回転します。 各スイッチには 0.6 秒の遷移プロセスがあります:

-webkit-transition: all 0.6s;
transition: all 0.6s;

たとえば、クラスは左から右に: item_0、item_1、item_cur、item_3、item_4 です。各クラスはスライド時の現在の p の位置です。左側にあると、右側の p が中央に切り替わり、クラスは左から右に item_1、item_cur、item_3、item_4、item_0 になります。

var egg_change = function(type){
 var $demo = $('.demo'),
  index = parseInt( $demo.attr('index_cur')||2 ),
  $item = $('.demo .item'),
  len = $item.length;

 if( type=='left' ){
  index = (index+1)%len;
 }else{
  index = (index-1+len)%len;
 }
 $demo.attr('index_cur', index);

 $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
 
 $item.eq( (index-2+len)%len ).addClass('item_0');
 $item.eq( (index-1+len)%len ).addClass('item_1');
 $item.eq(index).addClass('item_cur');
 $item.eq( (index+1)%len ).addClass('item_3');
 $item.eq( (index+2)%len ).addClass('item_4');
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

JavaScript はブラウザーが CSS3 属性をサポートしているかどうかをどのように判断しますか?

js と css3 を使用して回転効果を実現します

jQuery と CSS3 の折りたたみカード ドロップダウン リスト ボックスを使用して回転効果を実現します効果

以上がjs と CSS3 でカード回転切り替え効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。