Question

我一直在谷歌上搜索一周，我只是不明白如何将它们全部结合起来：（

我正在创建一个类似于this的横向网站，除了我希望能够使用箭头键在水平页面的部分之间来回移动，类似于this。

相关研究我发现以下几页：

我能想出的最好的是这个，但它不起作用：

$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
        case 37:
              evt.preventDefault(); 
              $.scrollTo('+=564px', 800, { axis:'x' }); 
                    break;
                }
});


$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
                    case 39:
              evt.preventDefault();
              $.scrollTo('-=564px', 800, { axis:'x' });
                    break;
                }
});

是不是只有一种方法可以使用箭头键或单击箭头按钮创建可以滚动到的锚点或div类？我在这里很丢失。也许我问得太多，但如果有人能指出我正确的方向，我将不胜感激，谢谢：）

Answer 1

$('document').keypress(function(e) {
   if (e.which == 38) {
       //scroll up
   } else if (e.which == 39) {
       //scroll right
   } else if (e.which == 40) {
       //scroll down
   } else if (e.which == 37) {
       //scroll left
   }   
});

使用.animate()执行滚动效果，并使用e.preventDefault();来阻止每个if块中的键的默认移动。

Answer 2

以下代码将检测左/右箭头按键：

$("body").keydown(function(e) {
    if (e.which == 37) { 
        // left arrow pressed
    }
    else if (e.which == 39) { 
        // right arrow pressed
    }
});

您只需为每种情况添加幻灯片逻辑。

使用箭头键或按钮滚动下一个/上一个锚点？

2 个答案: