Перейти к следующему элементу с помощью стрелок на клавиатуре с помощью jQuery - PullRequest
Новая
       23

Перейти к следующему элементу с помощью стрелок на клавиатуре с помощью jQuery

0 голосов
/ 22 марта 2012

Мне трудно найти свой ответ самостоятельно, поэтому, возможно, кто-то может помочь.

У меня есть горизонтальная прокрутка div (обертка) с множественными div (коробками) внутри него.

Я хочу, чтобы можно было нажимать клавиши со стрелками на клавиатуре, чтобы перейти к следующему элементу. Окно будет прокручиваться влево при каждом прыжке.

Я создал базовый jsFiddle, который люди тоже могут добавить, чтобы добавить навигацию с клавиатуры.

http://jsfiddle.net/ryanjay/JjhUN/

Ответы [ 2 ]

1 голос
/ 22 марта 2012

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;
}
1 голос
/ 22 марта 2012

Этого можно достичь, сохранив позиции ящиков и затем проверив их относительно позиции 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);
        }
    }
});

См. Демонстрацию

...