Question

我正在构建一个非常简单的网站，其中一系列图像垂直排列在页面上。我希望能够使用向上和向下箭头键平滑滚动从一个图像到下一个图像，向上或向下。这样，浏览所需的击键次数将最小化，并且可以避免页面向下和向上翻页的无与伦比的间距。

我想这将是一个javascript函数。但是，我对使用javascript的经验不是很充实，所以我希望你能在答案中考虑一个初学者。现在，图像排列在一个div内，并用br分隔（多个换行符）。因此，我认为可以在每个id中放置img或在每个img周围放置识别标记以供javascript使用。或者，也许还有另一种方法可以让javascript识别通过箭头键滚动的步骤。做这个的最好方式是什么？谢谢。

Answer 1

如果您了解jQuery，这是一个有趣而简单的方法。按下向上/向下箭头键按下并阻止其默认滚动操作。然后根据箭头按下找到下一个或上一个图像。最后使用jQuery的animate将元素的顶部带入视图。当你越过列表的末尾时，你需要进行一些错误检查，但我相信你可以根据这个来搞清楚。

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);
});

如何使用箭头键在页面上的对象之间平滑地上下滚动？

1 个答案: