Magic Line在使用键盘上下移动时未使用fullPage.js进行更新

Magic Line Not Updating with fullPage.js when Moving Up and Down w Keypad

本文关键字：fullPage 未使用 js 更新移动 Line 上下键盘 Magic 更新时间：2023-12-14

我已经组合了Alvaro Trigo的Full Page Scroll，https://github.com/alvarotrigo/fullPage.js和Chris Coyier的Magic Line Navigation，http://css-tricks.com/jquery-magicline-navigation/.几乎让它完全工作，除了当你用箭头键上下滚动时，它会更新活动链接，但魔术线不会更新。所以关闭。。。

这是js小提琴：http://jsfiddle.net/X5juR/

这是魔术线的示例代码

谢谢大家！

    $(function() {
        var $el, leftPos, newWidth,
            $mainNav = $("#menu");
            /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
        $mainNav.append("<li id='magic-line'></li>");
             /* Cache it */
        var $magicLine = $("#magic-line");
        $magicLine
            .width($(".active").width())
            .css("left", $(".active a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
        $("#menu li:not('#magic-line') a").hover(function() {
            $el = $(this).parent();
            leftPos = $el.position().left;
            newWidth = $el.width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        },function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        }).click(function() {
             $mainNav.find('li').removeClass('active');
             $(this).parent().addClass('active');
             $magicLine
                .data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width());
        });
        /* Kick IE into gear */
        $(".active a").mouseenter();

});

Magicline不应该以这种方式工作。你需要自己编码。。。

无论如何，看看这个活生生的例子：http://jsfiddle.net/X5juR/1/

我将匿名函数转换为magicLine()函数，然后使用afterRender和afterLoad回调来处理菜单：

// inline script in the head tag
$(document).ready(function () {
    var pepe = $.fn.fullpage({
        anchors: ['link1', 'link2', 'link3', 'link4', 'link5'],
        menu: '#menu',
        afterRender: function () {
            magicLine();
        },
        afterLoad: function (anchorLink, index) {
            var magicLine = $("#magic-line");
            var current = $('#menu').find('li').eq(index-1).find('a');
            var el = current.parent();
            var leftPos = el.position().left;
            var newWidth = el.width();
            magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }
    });
});