JavaScript-使用纯CSS3进行键盘导航

有没有一种方法可以将键盘导航添加到仅包含CSS3的链接,而无需js或任何js库？具体来说,我用一堆图像创建了一个纯css3灯箱效果,但是我想使用左右键在图像之间导航,而无需单击屏幕上的任何位置,而是使用转义来获得“取消”按钮的效果(类似于“关闭”)

解决方法:

级联样式表实际上是不可能的,您可以为序列设置动画时间或使用CSS进行动画,过渡等操作,但是您不能只使用CSS做！

原因

>级联样式表用于制作页面而不是UX的视觉元素
> 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将完成更改幻灯片的任务,或者您始终可以看到impress.js的源代码

标签：lightbox,css3,keyboard,navigation,javascript
来源： https://codeday.me/bug/20191201/2078699.html