使用css3中transition的页面切换(继续创新版)

上一篇文章，我从教程中学到了使用css3中transition的页面切换，而这次呢，我就稍微使用这个方法稍做一些少少改动，我的想法是将所有层都叠在一起，一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办？我就弄多了一个可以重新来过的按钮。最后总觉得美中不足，只有向下一页的翻动，如果想返回上一页的话，还要重新来过，为此我又新增加多一个按钮，按钮的动画我还是选择了Javascript来控制。

首先看看效果图

demo地址：http://zhuyingyan.github.com/myfavourite/update.html



这里我还弄的比较简单，还没有加上内容。

首先是html，

?
我把原本的内容页的div结构，改成ul，li结构。不过这里有点不太合理的地方就是我把页数在html中反过来写了，就是说我最后一页的div层放在第一个li里面。这个往后再做修改，这也关联到javascript的修改。

接着是css代码，跟之前的css并没有太大改动，主要是按钮的位置做了调整，还有使用javascript增加class的class定义。

.panelclick{
margin-top:-150%;
background:#fff;
-webkit-transition:all 1.8s ease-in-out;
-moz-transition:all 1.8s ease-in-out;
-o-transition:all 1.8s ease-in-out;
-ms-transition:all 1.8s ease-in-out;
transition:all 1.8s ease-in-out;
}
#navigation .linkClick{
background:#000;
color:#fff;
}

　　最后是javascript代码：

var pageChange = (function(){
/**
* listClickID 取得放着全部页面的ID号
* tagName     每个页面放于的标签
* i           这个比较重要是当前第i个页面，从0开始到length-1
* length      页面的个数
* nextPageId  下一页按钮的ID号
* again       重新来过按钮的ID号
* perviousPage上一页按钮的ID号
*
*
*/
var listClickID,tagName,nextPageId,againId,perviousPageId;
var listClick=document.getElementById(listClickID||"mylife").getElementsByTagName(tagName||"li");
var i=0,length=listClick.length;
var nextPage=document.getElementById(nextPageId||"nextPage");
var again=document.getElementById(againId||"again");
var perviousPage=document.getElementById(perviousPageId||"perviousPage");
/**
* init        获取下一页并加上className实现动画效果
*/
var init=function(){

var id=this.id;
if(i>=length){
return false;
}
var block=listClick[length-i-1];
i++;

block.style.MozTransitionDelay="0s";
block.style.WebkitTransitionDelay="0s";
if(block.className.indexOf("panelclick")==-1)
block.className+=" panelclick";
};
/**
* restart       页面都从上往下回来，而且是有层次的一个接着一个，这里我就用了延时
*/
var restart=function(){
i=0;
var j=0;
for(;i < length;i++){
var block=listClick[i];
console.log(block);
if(block.className.indexOf("panelclick")!=-1)
{
block.className=block.className.replace(" panelclick","");
block.style.MozTransitionDelay=j+"s";
block.style.WebkitTransitionDelay=j+"s";
j++;
}
}
j=0;
i=0;
};
/**
* previous        获取上一页并删去className实现动画效果
*/
var previous=function(){
if((length-i)>length-1){
return false;
}
var block=listClick[length-i];
console.log(block);
if(block.className.indexOf("panelclick")!=-1)
{
block.className=block.className.replace(" panelclick","");
block.style.MozTransitionDelay="0s";
block.style.WebkitTransitionDelay="0s";
}
i=i-1;
};
return {
setListClick:function(listID){
listClickID=listID;
return this;
},
setTagName:function(tagname){
tagName=tagname;
return this;
},
setNextPageId:function(nid){
nextPageId=nid;
return this;
},
setAgainId:function(aid){
againId=aid;
return this;
},
setPerviousPageId:function(pid){
perviousPageId=pid;
return this;
},
/**
* 加入事件绑定，实现相关键盘，鼠标点击效果
*/
mouseEvent:function(){
var body=document.getElementsByTagName("body")[0];
var that=this;
body.addEventListener("keydown",function(event){
console.log(event.keyCode);
if(event.keyCode==37){
previous();
}
else if(event.keyCode==39){
init();
}
});
perviousPage.addEventListener("click",function(event){
previous();
});
nextPage.addEventListener("click",function(event){
init();
});
again.addEventListener("click",function(event){
restart();
});
return this;
}
}
}(pageChange || {}));
pageChange.mouseEvent();

最后，小小的总结，由于思路有限，先是写这么多，之后希望能够努力拓展拓展，完善其中的内容。