Question

我正在创建一个简单的网站，其中图片垂直向下运行。我希望能够通过键盘箭头键在图像之间平滑滚动。在这个论坛的帮助下，我收到了以下建议（确实有效）。

问题：How can one smooth scroll up and down between objects on a page with arrow keys?

但是，我需要一些额外的功能。此设置可防止所有键盘功能的默认操作。我只想更改左右箭头键的默认操作。我决定使用左右，而不是上下，这样标准的向上和向下箭头导航以及向上翻页和向下翻页都不会受到影响。代码如何更改以允许预期使用除左箭头和右箭头之外的所有键？

此外，如果'img'标签之间没有其他标签，则此设置似乎无效。但是，我需要能够在图像之间或周围放置链接，文本和换行符。如何调整代码以实现此目的？或者，或者，将图像和必要的文本和链接分别放在页面上运行的“div”类中（现在它都在一个'div'中）然后让键盘导航进入'div'之间会更好吗？？

谢谢。

Answer 1

您应该执行类似下面的操作，以便在功能开头允许除左右箭头键之外的所有其他键 - ＆gt;

var keyCode = e.keyCode;

//return if it is not left/right arrow key
if (keyCode != 39 && keyCode != 37) {
    return;
}

我修改了你的html和脚本以使其工作。请参阅我的方法jsFiddle here

next（）和next（[selector]）的工作方式不同。前者接下来只是获得下一个兄弟，其他后者尝试首先获得匹配列表（$（'。active'）在你的情况下并从那里选择下一个匹配元素（为0）。

例如，

 <p class="selected active">Hello Again</p>
 <span class="log" >Test</span>
 <p class="selected">Hello Again</p>
 <div><span>And Again</span></div>

这个$("p.selected.active").next('p.selected')可能看起来像是要获取下一个p.selected，但事实并非如此。在我看来，jQuery迭代$("p.selected.active")来查找匹配的'p.selected'，它将返回空。

我使用了.next（）并添加了一个where子句来查找兄弟姐妹中的下一个img标签，

 $targetElement = $('.active').next();

 while ($targetElement.length != 0 && $targetElement.hasClass('img') == false) {
       $targetElement = $targetElement.next();
 }

我希望它有所帮助

修改

检查here。

添加isAnimating标志以避免发送keydown垃圾邮件。

修改后的css .active img{ border: 2px dotted red; }。

稍微修改了一下html。

Answer 2

代码如何更改以允许预期使用除左箭头和右箭头之外的所有键？

只有左/右键匹配时才能调用e.preventDefault();

如何调整代码以实现此目的？

您应该能够使用容器div包围每组数据，并更改代码以查找div而不是图像。

示例：http://jsfiddle.net/KnKC9/1/

如何调整此jquery键盘导航以允许其他标签和键盘功能？

2 个答案: