javascript - 如何使用键盘滚动照片

Question

我有一个小型摄影作品集网站，用来与亲戚分享照片。这些照片每隔 1000 像素左右排列在一个垂直滚动页面中。一个例子在这里： http: //pavelrozman.com/photo/events/jamison/。现在我有一个小的 Javascript，可以让你用箭头键滚动 800px。这没关系，但由于图像高度不同，因此不一致。我在 The Verge 上阅读了一篇文章，它正是我想要的，但我不知道如何实现它，因为我对 Javascript/jQuery 一无所知。这篇文章在这里http://www.theverge.com/2013/7/29/4560214/point-and-shoot-perfection-an-evening-with-sonys-rx100m2我想复制“使用'd'和's'滚动”功能，它滚动到下一个或上一个图像的顶部，但如果可能的话使用箭头键而不是's'和'd' . 先谢谢了。

Answer 1

在我的头顶上，列出top每个图像的偏移量，然后在按下向下/向上箭头时，将scrollTop位置与图像位置进行比较，以确定在向上/向下方向上哪个最接近。

var locs = [];

// Save offsets of each image
// Use a better selector in real life
$('img').each(function () {
    locs.push($(this).offset().top);
});

$(document).keydown(function (e) {

    switch (e.which) {
        case 37:
        case 38:
        case 83:
            // Get the current scroll position 
            var sTop = parseInt($(document).scrollTop());

            // For UP, go through the list backward until
            // you find one before the current scroll position
            for (i = locs.length-1; i >= 0; i--) {
                if (locs[i] < sTop) {
                    $(document).scrollTop(locs[i]);
                    break;
                }
            }
            break;
        case 39:
        case 40:
        case 68:
            // Get the current scroll position 
            var sTop = parseInt($(document).scrollTop());

            // For DOWN, go through the list until
            // you find one after the current scroll position
            for (i = 0; i < locs.length; i++) {
                if (locs[i] > sTop + 1) {
                    $(document).scrollTop(locs[i]);
                    break;
                }
            }
            break;
        default:
            return true;
    }

    return false;
});

演示：http: //jsfiddle.net/9BEbh/