Question

您好javascript的所有知识，

我对javascript有一点问题，希望其中一位帮助我解决问题。

如果您知道' PageRevealEffects '插件，则javascript会打开一个HTML中的多个页面。

以下是文档底部的插件文档和演示版：https://tympanus.net/codrops/2016/06/01/multi-layer-page-reveal-effects/

所以我的问题是我想连接导航栏和徽标点击插件，

http://bagrattam.com/stackoverflow/PageRevealEffects/

以下是其运作的代码

(function() {

    $('.navbar-brand').click(function(){
        $(this).data('clicked', true);
    });

    var n;
    $('#nav a').click(function () {
        n = $(this).parent().index() + 1;
    });

    var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
    currentPage = 0,

    revealerOpts = {
        // the layers are the elements that move from the sides
        nmbLayers : 3,
        // bg color of each layer
        bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
        // effect classname
        effect : 'anim--effect-3'
    };
    revealer = new Revealer(revealerOpts);

    // clicking the page nav
    document.querySelector('.navbar-brand').addEventListener('click', function() { reveal('bottom'); });
    var navli = document.getElementsByTagName("ul");
    for (var i = 0; i < navli.length; i++) {
        navli[i].addEventListener('click', function() { reveal('top'); });
    }

    // triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
    function reveal(direction) {
        var callbackTime = 750;

        callbackFn = function() {

            // this is the part where is running the turning of pages
            classie.remove(pages[currentPage], 'page--current');

            if ($('.navbar-brand').data('clicked')) {
                currentPage = 0;
            } else {
                currentPage = n;
            }

            classie.add(pages[currentPage], 'page--current');

        };

        revealer.reveal(direction, callbackTime, callbackFn);
    }
})();

Answer 1

http://bagrattam.com/stackoverflow/PageRevealEffects/

这是解决方案

var n;
$('#navbar a').click(function(){
    if($(this).attr('id') == 'a') {
        n = 0;
    } else if($(this).attr('id') == 'b') {
        n = 1;
    } else if($(this).attr('id') == 'c') {
        n = 2;
    } else if($(this).attr('id') == 'd') {
        n = 3;
    } else if($(this).attr('id') == 'e') {
        n = 4;
    };
});

var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
    currentPage = 0,

    revealerOpts = {
        // the layers are the elements that move from the sides
        nmbLayers : 3,
        // bg color of each layer
        bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
        // effect classname
        effect : 'anim--effect-3'
    };
    revealer = new Revealer(revealerOpts);

// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('top'); });
document.querySelector("#b").addEventListener('click', function() { reveal('top'); });
document.querySelector("#c").addEventListener('click', function() { reveal('top'); });
document.querySelector("#d").addEventListener('click', function() { reveal('top'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });

// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
        var callbackTime = 750;

        callbackFn = function() {

            classie.remove(pages[currentPage], 'page--current');

            currentPage = n;

            classie.add(pages[currentPage], 'page--current');
        };

    revealer.reveal(direction, callbackTime, callbackFn);
}

PageRevealEffects连接到导航栏

1 个答案: