我有一个页面过渡动画，我想做一个在Pt-Pages之间切换的导航。请帮助我将此代码添加到我的Javascript.Thanks [英] I Have A Page Transition Animation And I Want To Make A Navigation Which Switches Between Pt-Pages.Please Help Me To Add This Code To My Javascript.Thanks

问题描述

这是我的页面的html代码：

body>

<！ - 菜单 - >

• 主页
• 关于
• 工作
• 联络

this is my html code for the page:
body>
<!-- menu -->





• Home
• About
• Work
• Contact




< button id =iterateEffectsclass =pt-touch-button>




<button id="iterateEffects" class="pt-touch-button">


<！ - /触发器 - >





<!-- /triggers -->


























































/ body>

Javascript（这是切换到下一页的代码，但我需要添加将使我的导航的代码部分工作：

var PageTransitions =（function（）{



var $ main = $（'＃pt-main'），

$ pages = $ main.children（'div.pt-page'），

$ iterate = $（'#iterateEffects'），

animcursor = 1，

pagesCount = $ pages.length，

current = 0，

isAnimating = false，

endCurrPage = false，

endNextPage = false，

animEndEventNames = {

'WebkitAnimation'：'webkitAnimationEnd'，

'OAnimation'：'oAnimationEnd'，

'msAnimation'：'MSAnimationEnd'，

'动画'：'animationend'

}，

//动画结束事件名称

animEndEventName = animEndEventNames [Modernizr.prefixed（'animation'）]，

//支持css动画

support = Modernizr.cssanimations;



函数init（）{



$ pages.ea ch（function（）{

var $ page = $（this）;

$ page.data（'originalClassList'，$ page.attr（'class'）） ;

}）;



$ pages.eq（当前）.addClass（'pt-page-current'）;



$（'＃dl-menu'）。dlmenu（{

animationClasses：{in：'dl-animate-in-2'，out ：'dl-animate-out-2'}，

onLinkClick：function（el，ev）{

ev.preventDefault（）;

nextPage（el.data（'animation'））;

}

}）;



$ iterate.on（'click'，function（）{

if（isAnimating）{

return false;

}

if（animcursor> 1）{

animcursor = 1;

}

nextPage（animcursor）;

++ animcursor;

}）;



}



函数nextPage（options）{

var animation =（options.animation）？ options.animation：options;



if（isAnimating）{

返回false;

}



isAnimating = true;



var $ currPage = $ pages.eq（当前）;



if（options.showPage）{

if（options.showPage< pagesCount - 1）{

current = options。 showPage;

}

else {

current = 0;

}

}

else {

if（current< pagesCount - 1）{

++ current;

}

else {

current = 0;

}

}



var $ nextPage = $ pages.eq（当前）.addClass（'pt-page-current'），

outClass =''，inClass ='';



开关（动画）{







案例1：

outClass ='pt-page-rotateCubeBottomOut pt-page-ontop';

inClass ='pt-page-rotateCubeBottomIn';

休息;







}





$ currPage.addClass（outClass）.on（animEndEventName，function（）{< br $>
$ currPage.off（animEndEventName）;

endCurrPage = true;

if（endNextPage）{

onEndAnimation（ $ currPage，$ nextPage）;

}

}）;



$ nextPage.addClass（inClass） .on（animEndEventName，function（）}

endNextPage = true;

if（endCurrPage）{

onEndAnimation（$ currPage，$ nextPage）;

}

}）;



if（！support）{

onEndAnimation（$ currPage，$ nextPage）;

}



}



函数onEndAnimation（$ outpage，$ inpage）{

endCurrPage = false;

end NextPage = false;

resetPage（$ outpage，$ inpage）;

isAnimating = false;

}



函数resetPage（$ outpage，$ inpage）{

$ outpage.attr（'class'，$ outpage.data（'originalClassList'））;

$ inpage.attr（'class'，$ inpage.data（'originalClassList'）+'pt-page-current'）;

}

< br $>
init（）;



返回{

init：init，

nextPage ：nextPage，

};



}）（）;


/body>
Javascript(This is code to switch to next pages,but i need to add the code that will make my navigation part work:
var PageTransitions = (function() {

var $main = $( '#pt-main' ),
$pages = $main.children( 'div.pt-page' ),
$iterate = $( '#iterateEffects' ),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations;

function init() {

$pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} );

$pages.eq( current ).addClass( 'pt-page-current' );

$( '#dl-menu' ).dlmenu( {
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
onLinkClick : function( el, ev ) {
ev.preventDefault();
nextPage( el.data( 'animation' ) );
}
} );

$iterate.on( 'click', function() {
if( isAnimating ) {
return false;
}
if( animcursor > 1 ) {
animcursor = 1;
}
nextPage( animcursor );
++animcursor;
} );

}

function nextPage(options ) {
var animation = (options.animation) ? options.animation : options;

if( isAnimating ) {
return false;
}

isAnimating = true;

var $currPage = $pages.eq( current );

if(options.showPage){
if( options.showPage < pagesCount - 1 ) {
current = options.showPage;
}
else {
current = 0;
}
}
else{
if( current < pagesCount - 1 ) {
++current;
}
else {
current = 0;
}
}

var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';

switch( animation ) {



case 1:
outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCubeBottomIn';
break;



}


$currPage.addClass( outClass ).on( animEndEventName, function() {
$currPage.off( animEndEventName );
endCurrPage = true;
if( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );

$nextPage.addClass( inClass ).on( animEndEventName, function() {
$nextPage.off( animEndEventName );
endNextPage = true;
if( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );

if( !support ) {
onEndAnimation( $currPage, $nextPage );
}

}

function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false;
resetPage( $outpage, $inpage );
isAnimating = false;
}

function resetPage( $outpage, $inpage ) {
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
}

init();

return {
init : init,
nextPage : nextPage,
};

})();

推荐答案

main =




（'＃pt-main'），


( '#pt-main' ),





pages =




这篇关于我有一个页面过渡动画，我想做一个在Pt-Pages之间切换的导航。请帮助我将此代码添加到我的Javascript.Thanks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！