PageRevealEffects連接到導航欄

Question

您好所有的JavaScript知者的，

我有一個小問題，關於JavaScript和想一個你幫我解決這個問題。

如果您知道'PageRevealEffects'插件，那麼在一個HTML中有多個頁面通過javascript打開。

以下是在文檔底部的插件文檔和演示版本：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); 
}