javascript - 純粋な css3 を使用したキーボード ナビゲーション

Question

jsまたはjsライブラリなしで、css3だけでキーボードナビゲーションをリンクに追加する方法はありますか? 具体的には、一連の画像を使用して純粋な css3 ライトボックス効果を作成しましたが、画面上のどこかをクリックせずに左キーと右キーを使用して画像間を移動し、エスケープを使用して「キャンセル」ボタンの効果を取得したい (閉じるに似ています)

Answer 1

あなたが求めていることは、Cascading Style Sheets では文字通り不可能です。タイミングのためにシーケンスをアニメーション化したり、CSS を使用してアニメーション化、トランジションなどを行うことはできますが、CSS だけでやりたいことを行うことはできません!.

理由

1. カスケード スタイル シートは、UX ではなく、ページの視覚要素を作成するために作成されました。
2. Css には、キーボードとやり取りするためのメソッドがありません。

これを実現するために、JavaScript を少し追加することもできます。しかし、javascript を使用したくないので、行き詰まっています。

チェックボックスハック

チェックボックスラジオボックスを使用すると、このようなことが達成可能になりますが、最初にフォーカスを移動する必要があります。これは autofocus 属性を使用して行うことができます..

したがって、このフィドルはあなたの問題を解決するはずです。

http://jsfiddle.net/darkyen/NUtnX/

ただし、「ぼかし」があるとこれが失敗する可能性があることを事前に警告しておきます。したがって、より優れた JavaScript コードバリアントを以下に示します

JavaScript コード

あなたが望むものを達成するためのJavaScriptコードには、非常に最小限のJavaScriptが含まれますあなたのマークアップが

したがって、単純にlil JavaScriptを割り当てることができます

(function(){
 var slide = 0,  // Current slide 
     max   = 10, // Maximum Number of slides
 ele = document.getElementById("show");
     document.addEventListener('keydown',function(e){
          e.preventDefault();
          e.stopPropagation(); // To stop more event stuff and default behaviour
          key = e.keyCode; // To find out what key is this 
          if( key === 39 ){
              // Right arrow 
              // Aha we incremented the value!
              slide++;
              slide %= (max+1);
              // Increase the value of slide by 1 and keep em in limits
          }else if( key === 37){
              slide = (--slide >= 0)?slide: ( slide + max );
              // Will decrement the slide value by 1 and if they are less then 0 then   will cycle it to the last slide 
          }  

          ele.className.replace(/slide[0-9]/gi,'slide'+slide);                 
          // wasn't hard now was it ?     
     });
 })();

上記の最小限の JavaScript は、スライドを変更するタスクを実行するか、impress.jsのソース コードをいつでも確認できます。