Question

我正在努力寻找自己的答案，所以也许有人可以提供帮助。

我有一个水平滚动div（包装器），里面有mutliple div（box）。

我希望能够单击键盘箭头键以跳转到下一个元素。每次跳跃时窗口都会向左滚动。

我创建了一个基本的jsFiddle，人们也可以添加它来添加键盘导航。

Answer 1

这可以通过存储框的位置然后针对window.scrollX位置进行测试来实现。然后根据按下的箭头键动画到最近的框。

var boxLefts = [];
$('.box').each(function(i, el){
    boxLefts.push(this.offsetLeft);
});

$(document).keydown(function(e) {
    var dir = false,
        targetLeft = -1;

    switch (e.keyCode) {
    case 37:
        dir = -1;
        break;                
    case 39:
        dir = 1;
        break;
    }

    if (dir) {
        e.preventDefault();
        winLeft = window.scrollX;
        $.each(boxLefts, function(i, v){
            if ((dir == 1 && winLeft < v && targetLeft < 0) ||
                (dir == -1 && winLeft > v)) {
                targetLeft = v;
            }
        });
        if (targetLeft >= 0) {
            $('html, body').animate({scrollLeft: targetLeft}, 1000);
        }
    }
});

See Demo

Answer 2

yuuuuuuuuuppppppppppppyyyyyyyyyyyyy最终完成了它：..）

在此处查看：http://jsfiddle.net/JjhUN/7/

$(function() {
    var index = 0;
    var elems = $('.box');
    var len = $('.box').length;
    elems.eq(index).addClass('selected_div');
    $(document).keyup(function(e) {
        var key = e.keyCode || e.charCode || e.which;
        switch (key) {
        case 39:
            if(index < len-1){
                elems.eq(index).removeClass('selected_div');
                index = index +1;
                elems.eq(index).addClass('selected_div');
                $('#wrapper').animate({"left": "-=210px"}, "slow");
                }
            break;
        case 37:
            if(index > 0){
              elems.eq(index).removeClass('selected_div');
              index = index - 1;
              elems.eq(index).addClass('selected_div');
              $('#wrapper').animate({"left": "+=210px"}, "slow");
            }
            break;
        }
    });
});

<强> CSS：

#wrapper {
    position:absolute;
    white-space: nowrap;
}
.selected_div{
    background-color: blue;
}
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 10px 0 0;
    display: inline-block;
}

使用jQuery键盘箭头跳转到下一个元素

2 个答案:

See Demo