使用纯 CSS3 进行键盘导航

keyboard navigation with pure css3

本文关键字：键盘 导航 CSS3      更新时间：2023-09-26
有没有办法将键盘导航添加到仅使用 css3 的链接，而无需 js

或任何 js 库？ 具体来说，我已经用一堆图像创建了一个纯 css3 灯箱效果，但我想使用左右键在图像之间导航，而无需单击屏幕上的任何地方并使用 escape 获得"取消"按钮的效果（类似于关闭）

你所要求的用级联样式表几乎是不可能的，你可以对你的序列进行动画处理，或者做一些事情，比如动画，用CSS过渡，但你不能只用CSS做你想做的事情！

原因

  1. 级联样式表是为制作页面的视觉元素而不是UX而制作的
  2. Css 没有与键盘交互的方法。

您可以添加一点 javascript 来实现这一点。但是由于您不想使用javascript，因此您被困住了！

复选框黑客

使用复选框单选框可以实现这样的事情，但最初又是重点需要携带.这可以使用自动对焦属性来完成。

所以这个小提琴应该可以解决你的问题。

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将完成更改幻灯片的任务，或者您始终可以看到令人印象深刻的源代码.js

相关文章：