使用css3中transition的页面切换

一：简述

点击文本框EditText,系统会自动弹出软键盘（其本质是一个Dialog），这必然会引起当前Activity主窗口的大小调整

而Android提供了不同的可选模式去调整活动窗口的大小，与之相关的属性为：android:windowSoftInputMode，当然具体的实现是由系统完成的

可以在清单文件Manifest.xml中的Activity标签内设置

如：android:windowSoftInputMode="stateUnspecified|adjustPan"

该属性可选的值有两部分，一部分为软键盘的状态控制，另一部分是活动主窗口的调整。前一部分本文不做讨论，请读者自行查阅android文档。

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

首先看看效果图

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

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

首先是html，

<div id="mylife"> <ul>  <li id="pageFour" class="panel"> <div class="content"> <h2>page Four</h2> <p>Some content ssss</p> </div> </li> <li id="pageThree" class="panel"> <div class="content"> <h2>Page Three</h2> <p>Some content ssss</p> </div> </li> <li id="pageTwo" class="panel"> <div class="content"> <h2>Page Two</h2> <p>Some content ssss</p> </div> </li> <li id="pageOne" class="panel"> <div class="content"> <h2>Page one</h2> <p>Some content ssss</p> </div> </li> <li id="pageTop" class="panel"> <div class="content"> <p class="c-special">to my favourite person：</p> <h2>Roger Federer</h2> <p>Some content ssss</p> </div> </li> </ul> </div> <div id="header"> <ul id="navigation"> <li><a id="perviousPage" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">pervious page</a></li> <li><a id="nextPage" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">next page</a></li> <li><a id="again" href="http://www.cnblogs.com/zhuyingyan/archive/2012/07/28/#">again</a></li> </ul> </div>

我把原本的内容页的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();

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

更多相关文章

随机推荐