2

私は単純なログインフォームと登録フォームを持っています。現在、コンテナーがホバーされるとy軸で回転し、ホバーが削除されると回転して開始します。

必要なのは、登録ボタンをクリックすると裏側 (登録ページ) に反転し、[ログインする] ボタンをクリックすると、再び表側に戻るようにバインドすることです。

これは、テキストの壁を取り除くためのフィドルです。

任意の支援をいただければ幸いです。

4

2 に答える 2

2

それは非常に簡単です、あなたはほとんどそこにいました。あなたが持っているので

/*#f1_container:hover #f1_card,*/ #f1_container.hover_effect #f1_card {
  transform: rotateY(180deg);
}

.hover_effectCSS では、Register/To Login ボタンをクリックするときにクラスを追加/削除するだけで済みます。

JavaScript を少しだけ使用します。

var face_changers = document.querySelectorAll('.btnFlip'), 
    f1_container = document.getElementById('f1_container');

for(var i = 0; i < face_changers.length; i++){
    face_changers[i].addEventListener('click', function(e) {
        f1_container.classList.toggle('hover_effect');
        e.preventDefault();
    }, false);
}​

デモ

[ホバー部分もコメントアウトしたので、ホバーの反転はもうありません。それ以外は、CSS や HTML に変更を加えていません]

于 2012-10-15T00:14:46.143 に答える
1

次のセレクターの先頭にクラスを追加する必要があります

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card

回転をゼロに設定し、クリック時にそのクラスを切り替えます。

編集：

セレクターを使用してカードを回転させています

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

ホバーしたときに常に回転しないようにするには、そのルールをオーバーライドするさらに具体的なセレクターを提供する必要があります。これを行うには、その前に任意のセレクターを追加します。これを行う最善の方法は、通常、親要素にクラスを追加することです。したがって、新しいルールは次のようになります

.registered#f1_container:hover #f1_card, .registered#f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

これは、f1_container の ID を持つ要素だけではなく、f1_container の ID を持つ要素と登録済みのクラスに一致します。

登録ボタンをクリックしたときに少しの JavaScript を実行して、要素でこのクラスを切り替えたいと思うでしょう。

ボタンに一意の ID やクラスがないため、クリック リスナーの jQuery セレクターがややこしい

$('#frmReg button:not(".btnFlip")').on('click', function(){
  $('btnFlip').addClass('registered')
})

明らかに、そのボタンに id を追加するだけであれば、少し簡単になります。

于 2012-10-14T23:37:18.197 に答える