空间管理您的位置: ITPUB个人空间 » GBin1 » 日志

分享一个超酷javascript全屏幻灯导航(fullscreen slide navigation)

上一篇 / 下一篇 2012-01-21 11:05:32

查看( 22 ) / 评论( 0 ) / 评分( 0 / 0 )

在线演示在线下载

这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航，包括了16个幻灯，4个一行，一共4行。并且通过了CSS3箭头添加了动画导航效果。而且提供一个迷你的导航条能够帮助用户记录访问过的幻灯页面。希望大家喜欢！

Javascript代码

varnavi={
// variables
aPages:[],
aLinks:[],
tween:{},
oParent:null,
oPages:null,
bRunning:null,
sTargPage:null,
sCurPage:null,
bHash:null,
sOldH:null,
bUpdateH:true,
// initialization
init:function(aParams){
this.oPages=document.getElementById(aParams.pages_id);
this.oParent=document.getElementById(aParams.parent_id);
varaAEls=this.oParent.getElementsByTagName('a');
vari=0;varp=null;
while(p=aAEls[i++]){
if(p.className&&p.className.indexOf('go')>=0){
varsHref=p.href.split('#')[1];
varoDst=document.getElementById(sHref);
if(oDst){
// fill-in pages array
this.aPages[sHref]={
oObj:oDst,
iXPos:-oDst.offsetLeft,
iYPos:-oDst.offsetTop
};
// fill-in links array
this.aLinks.push({a:p,oObj:oDst});
p.onclick=function(){
navi.goto(this.href.split('#')[1],aParams.duration);
returnfalse;
}
}
}
}
this.resize();
if('onhashchange'inwindow){
if(location.hash!==''&&location.hash!=='#'){
this.sOldH=location.hash.substring(1);
this.goto(this.sOldH,-1);
}else
this.goto('page1',-1);
this.bHash=true;
window.onhashchange=function(){
if(location.hash.substring(1)!==navi.sOldH){
navi.sOldH=location.hash.substring(1);
if(navi.sOldH==''){
navi.bUpdateH=false;
}
navi.goto(navi.sOldH,aParams.duration);
}
returnfalse;
}
}
},
// on resize
resize:function(){
variCurW=this.oParent.offsetWidth;// current sizes
variCurH=this.oParent.offsetHeight;
for(variinthis.aPages){// for each page
varoPage=this.aPages[i];
variNewX=Math.round(oPage.oObj.offsetLeft*iCurW/oPage.oObj.offsetWidth);// new sizes
variNewY=Math.round(oPage.oObj.offsetTop*iCurH/oPage.oObj.offsetHeight);
oPage.oObj.style.left=iNewX+'px';
oPage.oObj.style.top=iNewY+'px';
oPage.oObj.style.width=iCurW+'px';
oPage.oObj.style.height=iCurH+'px';
oPage.iXPos=-iNewX;
oPage.iYPos=-iNewY;
if(this.sCurPage)
this.goto(this.sCurPage,-1);
}
},
goto:function(sHref,iDur){
this.tween.iStart=newDate()*1;
this.tween.iDur=iDur;
this.tween.fromX=this.oPages.offsetLeft;
this.tween.fromY=this.oPages.offsetTop;
this.tween.iXPos=this.aPages[sHref].iXPos-this.tween.fromX;
this.tween.iYPos=this.aPages[sHref].iYPos-this.tween.fromY;
this.sTargPage=sHref;
if(!this.bRunning)
this.bRunning=window.setInterval(this.animate,24);
},
animate:function(){
variCurTime=(newDate()*1)-navi.tween.iStart;
if(iCurTime<navi.tween.iDur){
variCur=Math.cos(Math.PI*(iCurTime/navi.tween.iDur))-1;
navi.oPages.style.left=Math.round(-navi.tween.iXPos*.5*iCur+navi.tween.fromX)+'px';
navi.oPages.style.top=Math.round(-navi.tween.iYPos*.5*iCur+navi.tween.fromY)+'px';
}else{
navi.oPages.style.left=Math.round(navi.tween.fromX+navi.tween.iXPos)+'px';
navi.oPages.style.top=Math.round(navi.tween.fromY+navi.tween.iYPos)+'px';
window.clearInterval(navi.bRunning);
navi.bRunning=false;
navi.sCurPage=navi.sTargPage;
vari=0;varp=null;
while(p=navi.aLinks[i++]){
if(p.oObj.id==navi.sCurPage){
if(p.a.className.indexOf('visited')>=0){
p.a.className=p.a.className.replace('visited','active');
}elsep.a.className+=' active';
p.visited=true;
}elseif(p.visited){
p.a.className=p.a.className.replace('active','visited');
}
}
if(navi.bHash){
if(navi.bUpdateH){
navi.sOldH=navi.sCurPage;
window.location.hash=navi.sCurPage;
}
navi.bUpdateH=true;
}
}
}
}
window.onload=function(){// page onload
navi.init({parent_id:'container',pages_id:'pages',duration:1000});
}
window.onkeydown=function(event){// keyboard alerts
switch(event.keyCode){
case37:// Left key
variPage=navi.sCurPage.substring(4)*1;
iPage--;
if(iPage<1){
iPage=1;
}
navi.goto('page'+iPage,1000);
break;
case39:// Right key
variPage=navi.sCurPage.substring(4)*1;
iPage++;
if(iPage>16){
iPage=16;
}
navi.goto('page'+iPage,1000);
break;
}
};