Как можно плавно перемещаться между объектами на странице с помощью клавиш со стрелками?

Question

Я создаю очень простой веб-сайт с серией изображений, расположенных вертикально на странице. Я хотел бы иметь возможность использовать клавиши со стрелками вверх и вниз для плавной прокрутки от одного изображения к другому, вверх или вниз. Таким образом, количество нажатий клавиш, необходимое для просмотра, будет сведено к минимуму, и можно избежать непревзойденного расстояния между страницами вниз и вверх.

Я полагаю, что это будет функция JavaScript. Тем не менее, я не очень опытен в использовании javascript, поэтому я надеюсь, что вы найдете новичка в ответе. Прямо сейчас изображения располагаются внутри одного div и разделяются br (несколько разрывов строк). Итак, я думаю, что возможно было бы разместить id в каждом img или разместить идентифицирующие теги вокруг каждого img для использования JavaScript. Или, возможно, есть другой способ заставить JavaScript распознавать шаги для прокрутки с помощью клавиш со стрелками. Каков наилучший способ сделать это? Спасибо.

Answer 1

Это весело и легко, если вы знаете jQuery.Поймайте нажатия клавиш со стрелками вверх / вниз и предотвратите их действие прокрутки по умолчанию.Затем найдите следующее или предыдущее изображение на основе нажатия стрелки.Наконец, используйте анимацию jQuery для отображения верхней части элемента.Вам нужно будет включить некоторую проверку ошибок, когда вы пройдете за конец списка, но я уверен, что вы можете понять это на основе этого.

http://jsfiddle.net/aVvQF/4/

$(window).keydown(function(e) {
    e.preventDefault(); //prevent default arrow key behavior

    var targetElement;
    //down
    if (e.keyCode == 40) {
        $targetElement = $('.active').next('img');
    }
    //up
    else if (e.keyCode == 38) {
        $targetElement = $('.active').prev('img');
    }
    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');

    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});