Question

我正在尝试使用左/右箭头找到一个wordpress插件或某种方式滚动浏览带有图像的文章。喜欢跳到下一个div：）

此处的示例：http://www.theatlantic.com/photo/2016/04/still-cleaning-up-30-years-after-the-chernobyl-disaster/476748/

我看过这种在多个网站上滚动的方式，但我无法设法谷歌，所以我可以得到一些结果。如果有人知道我该怎么做，请善待并分享知识：D

谢谢！

Answer 1

我的一位朋友帮助了我，这是他们可能关注的答案：

// should smooth scroll be enabled?
var smooth_scroll = true;

// should we try to scroll to image's left side?
var horizontal_scroll = false;

// duration of smooth scroll (ms)
var duration = 100;

// pause (ms) between smooth scroll frame
var interval = 10;

// min area (px2) of image to include in navigation
var area = 10000;

// no more configurable settings below this comment

var img = document.getElementsByClassName('body-text')[0].getElementsByTagName('img');
var len = img.length;
var images = [];

for (var i=0; i<len; i++) {
    if (img[i].width * img[i].height >= area) {
        images.push(img[i]);
    }
}

len = images.length;

if (!len) {
    return;
}

document.onkeyup = function (e) {
    var key = (window.event) ? event.keyCode : e.keyCode;

    switch (key) {
        case 74: // J
        case 75: // K

            var page_y = scrollY();
            index = -1;

            if (key == 75) {
                for (var i=len-1; i>-1; i--) {
                    position = getElementXY(images[i]);
                    if ((position.y + 5) <= page_y) {
                        index = i;
                        break;
                    }
                }
            } else {
                for (var i=0; i<len; i++) {
                    position = getElementXY(images[i]);
                    if ((position.y - 5) >= page_y) {
                        index = i;
                        break;
                    }
                }
            }

            if (index === -1) {
                return;
            }

            var position = getElementXY(images[index]);
            if (smooth_scroll) {
                var steps = duration / interval;
                var x_step = (horizontal_scroll ? Math.round((position.x - scrollX()) / steps) : 0);
                var y_step = Math.round((position.y - scrollY()) / steps);
                var step = 0;

                function smoothScrollBy() {
                    window.scrollBy(x_step, y_step);
                    if (++step < steps) {
                        setTimeout(smoothScrollBy, interval);
                    } else {
                        window.scrollTo(0, position.y);
                    }
                }

                smoothScrollBy();
            } else {
                scrollTo((horizontal_scroll ? position.x : 0), position.y);
            }

        break;
    }
};

function getElementXY(elem) {
    var x = 0,
            y = 0;

    while (elem.tagName != "BODY") {
        x += elem.offsetLeft;
        y += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return { x: x, y: y };
}

function scrollX() {
    return window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
}

function scrollY() {
    return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
}

http://jsfiddle.net/v18eLqos/4/

万岁！：d

P.S。这是针对j / k，左边是：37，右边：39

通过输入j / k或←/→

1 个答案: