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/

如何使用键盘滚动照片

1 个答案: