跳到下一个&使用jQuery的prev image（垂直滚动） [英] Jump to next & prev image (vertical scroll) with jQuery

问题描述

我有一个线性的图像列表（垂直），我搜索使用键盘和&向下导航到下一个或上一个图像。
我的问题是我不知道我在滚动的哪个位置以及我需要滚动到下一个或上一个图像的位置。

I have a linear list of images (vertical) and I search to use the keyboard up & down to navigate to next or prev images. My problem is that I don't know where I'm on the scroll and where I need to scroll to go to the next or prev image.

我看到了这个例子，但它是横向的。我试图让它垂直，但没有成功......

I saw this example but it's in horizontal. I tried to make it vertical, but without success…

我还尝试了一些使用inView jQuery插件的东西，但也没有成功。
一些开始：

I also tried some things with the inView jQuery plugin, without success too. Some start :

  $("body:not(.photo) #images img").each(function() {
     $(this)
        .css({cursor: "pointer"})
        .on("click", function() {
           var $n = $(this).next(),
               offset = ($n.length) ? $n.offset().top : 0;

           scrollTo(offset);
        });
  });

  // http://jsfiddle.net/JjhUN/5/
  var elems = [];
  $("#images").children().each(function() {
     elems.push(this.offsetTop);
  });

  console.log(elems);

推荐答案

我玩过那个水平示例，并更改它到垂直。 http://jsfiddle.net/6gCA6/1/

I have played with that horizontal example, and change it to vertical. http://jsfiddle.net/6gCA6/1/

我希望它有用。

JS

$(function() {
    var boxLefts = [];
    $('.box').each(function(i, el){
        boxLefts.push(this.offsetTop);
    });

    $(document).keydown(function(e) {
        var dir = false,
            targetUp = -1;

        switch (e.keyCode) {
        case 38:
            dir = -1;
            break;                
        case 40:
            dir = 1;
            break;
        default:
            break;
        }

        if (dir) {
            e.preventDefault();
            winUp = window.scrollY;
            $.each(boxLefts, function(i, v){
                if ((dir == 1 && winUp < v && targetUp < 0) ||
                    (dir == -1 && winUp > v)) {
                    targetUp = v;
                }
            });
            if (targetUp >= 0) {
                $('html, body').animate({scrollTop: targetUp}, 1000);
            }
        }
    });
});

CSS

#wrapper {
    white-space: nowrap;
    width: 1500px;
}

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 10px 0 0;
    /*display: inline-block;*/
}

这篇关于跳到下一个&使用jQuery的prev image（垂直滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！