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


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

          首先看看效果图

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

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

    首先是html,

    <div id="mylife">
    			<ul>
    				<!-- page top -->
    				<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="#">pervious page</a></li>
    				<li><a id="nextPage" href="#">next page</a></li>
    				<li><a id="again" href="#">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();

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

  • 相关阅读:
    14、python基础
    13、Python入门
    12、运算符、流程控制
    10、Linux(六)
    Windows 分层窗口 桌面上透明 Direct3D
    Windows 进程间通信 共享内存
    Linux 库的使用
    FFmpeg 命令行
    FFmpeg 摄像头采集
    FFmpeg input与output 函数流程
  • 原文地址:https://www.cnblogs.com/zhuyingyan/p/2613592.html
Copyright © 2020-2023  润新知