Question

我正在尝试使用键盘导航创建图库。除了一些小东西外，大多数都能正常工作。画廊应该有3个州。顶部，中间和底部状态。见附图：

enter image description here

在某些情况下，如果您在图库中上下滚动太快，就会“乱码”。

错误的状态：

enter image description here

我的猜测是在动画结束前注册了键盘事件。非常感谢任何有关此问题的帮助。

var y_pos = 1,
x_pos = 1,
item_position = 1;
var gallery_li = $('.gallery > ul > li');
var gallery_ul = $('.gallery');
var total_items = gallery_li.length;
var num_cols = 3;
var num_rows = Math.ceil(total_items / num_cols);
var li_height = gallery_li.height();
var li_margin = gallery_li.css("margin-top").replace("px", "");
var move_margin = 0;
var li_offset = li_height + (1.5 * li_margin);

$('.gallery > ul > li').each(function(i) {
    $(this).attr('id', 'property_' + (i + 1));
    $(this).text('TEST ' + (i + 1))
});

selectItem(1);

function selectItem(pos) {
    var item_position = pos;
    gallery_li.removeClass('active');
    var item = $('.gallery > ul > li:nth-child(' + item_position + ')');
    item.addClass('active');
}

//calculate number of li per row
function calculateLIsInRow() {
    var lisInRow = 0;
    $('.gallery > ul > li').each(function() {
        if ($(this).prev().length > 0) {
            if ($(this).position().top != $(this).prev().position().top) return false;
            lisInRow++;
        } else {
            lisInRow++;
        }
    });
    return lisInRow;
}

$("html").on("keydown", function(event) {
    keyCode = event.which;

    var current_position = y_pos + x_pos;
    var gallery_ul = $('.gallery > ul');
    var gallery_ul_mt = gallery_ul.css("margin-top").replace("px", "");


    if (keyCode == 37) {
        //move left
        if (x_pos > 1) {
            x_pos--;
        }

    } else if (keyCode == 39) {
        //move right
        if (x_pos < num_cols && item_position < total_items) {
            x_pos++;
        }

    } else if (keyCode == 38) {
        //move up
        if (y_pos > 1) {
            y_pos--;

            if (y_pos > 1) {
                move_margin += li_offset;
                gallery_ul.stop(true, true).finish().animate({
                    marginTop: move_margin
                }, 500);
            }

        }

    } else if (keyCode == 40) {
        //move down
        if (y_pos < num_rows && (item_position + num_cols <= total_items)) {
            y_pos++;

            if (y_pos > 2 && (y_pos + 1 <= num_rows)) {
                move_margin -= li_offset;
                gallery_ul.stop(true, true).finish().animate({
                    marginTop: move_margin
                }, 500);
            }
        }
    }


    item_position = (x_pos * y_pos) + ((num_cols - x_pos) * (y_pos - 1));
    selectItem(item_position);
});

Answer 1

我自己解决了这个问题。

问题是增加和减去顶部偏移量。

move_margin -= li_offset;

必须根据所选行/ y位置将其更改为计算位置：

move_margin = -(y_pos-2) * li_offset;

<强> Updated fiddle

Jquery自定义库，具有键盘导航行为

1 个答案: