具有键盘导航行为的 Jquery 自定义库答案

【问题标题】：Jquery custom gallery with keyboard navigation bahviour具有键盘导航行为的 Jquery 自定义库
【发布时间】：2014-12-19 22:45:46
【问题描述】：

我正在尝试使用键盘导航创建一个图片库。除了一些小东西外，大部分都可以正常工作。画廊应该有 3 个状态。顶部、中心和底部状态。查看包含的图片：

在某些情况下，当您在画廊中上下“滚动”太快时，它会被“打乱”。

错误状态：

我的猜测是键盘事件是在动画完成之前注册的。非常感谢您对此问题的任何帮助。

小提琴： http://jsfiddle.net/sb3nqtnr/1/

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);
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

自己解决了这个问题。

问题在于添加和减去顶部偏移量。

move_margin -= li_offset;

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

move_margin = -(y_pos-2) * li_offset;

Updated fiddle

【讨论】：