jQuery实现网页全屏切换，鼠标滚动切换，键盘上下键切换

jQuery实现网页全屏切换，鼠标滚动切换，键盘上下键切换

效果图连接：网页全屏切换（个人简历）
html代码：

 <ul id="tags">
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
    </ul>
    <div class="wrapper" id="wrapper">
    	<div class="page">
    		<div class="page-wrapper">
            <div class="page01">
            </div></div>
    	</div>
    	<div class="page">
            <div class="page-wrapper">
                <div class="page02">
                </div>
            </div>
    	</div>
    	<div class="page">
            <div class="page-wrapper">
                <div class="page03">
                </div>
            </div>
    	</div>
    	<div class="page">
            <div class="page-wrapper">
                <div class="page04">
                </div>
            </div>
    	</div>
    </div>

css代码：

	   *{
	   	margin:0;
	   	padding: 0;
	   }
	   a,a:hover{
	   	text-decoration: none;
	   }
	   html,body{
	   	width: 100%;
	   	height: 100%;
	   	overflow: hidden;
	   }
	         .wrapper{
       	width:100%;
       	height: 100%;
       	position: relative;
       	top: 0;
       }
       .page{
       	width:100%;
       	height: 100%;
       }
       .page:nth-child(1){background-image: url(img/blog-1.jpg);-webkit-background-size: cover;background-size: cover; }
       .page:nth-child(2){background-image: url(img/blog-2.jpg);-webkit-background-size: cover;background-size: cover;}
       .page:nth-child(3){background-image: url(img/blog-3.jpg);-webkit-background-size: cover;background-size: cover;}
       .page:nth-child(4){background-image: url(img/blog-4.jpg);-webkit-background-size: cover;background-size: cover;}
              #tags{
       	position: fixed;
       	top:50%;
       	right: 2%;
       	width: 20px;
       	z-index: 10000;
       	list-style: none;
       	margin-top:-80px;
       }
       #tags li{
       	width: 20px;
       	height: 20px;
       	line-height: 20px;
       	color: #fff;
       	text-align: center;
       	background-color: #840505;
       	border-radius: 50%;
       	margin-bottom: 20px;
              cursor: pointer;
       }
       #tags li.active{
       	background-color: green;
       }
       .page-wrapper{
              width: 100%;
              height: 100%;
              background-color: rgba(255,255,255,0.5);
       }

js代码：

$(function() {
       	var wrapper =$('#wrapper');
        var pages=wrapper.children;
        var tags =$("#tags");
        var lis =$('li');
        //导航切换
        for (var j = 0; j < lis.length; j++) {
          lis[j].index=j;
        	lis[j].onclick=function(){
            for (var n= 0; n< lis.length; n++) {
              lis[n].className="";
            }
           this.className="active";
           $("#wrapper").animate({top:(-100*this.index+"%")},500); 
        	}
        }
        //键盘上下键切换
             var x=0;
             var omark=false;
        	document.onkeyup=function(event){
        		var event =event||window.event||arguments.callee.caller.arguments[0];
        		if (omark) {return;}
        		omark =true;
        		if (event&&event.keyCode==38) {
        			x--;
        			if (x<0) {x=0;}
        			$("#wrapper").animate({top:'-'+100*x+"%"},500,function(){omark=false;});
        			}
      			if (event &&event.keyCode==40) {
      				x++;
      				if (x>3) {x=3;}
        			$("#wrapper").animate({top:'-'+100*x+"%"},500,function(){omark=false;});
        			}
            for (var n= 0; n< lis.length; n++) {
              lis[n].className="";
            }
        		lis[x].className="active";
        	}
          //鼠标滚动
          var wheel= function (event) {
            var delta=0;
            if(!event)//for ie
                event=window.event;
            if(event.wheelDelta){   //ie,opera
                delta=event.wheelDelta/120;
            }else if(event.detail){
                delta=-event.detail/3;
            }
            if(delta){
                handle(delta,lis);
            }
            if(event.preventDefault)
                event.preventDefault();
                event.returnValue=false;
          }
           if(window.addEventListener){
            window.addEventListener('DOMMouseScroll',wheel,false);
            }
            window.onmousewheel=wheel;
            var num;
            function handle(delta,arr) {
               for(var i=0;i<arr.length;i++){
                  if(arr[i].className=="active"){
                      num=i;
                   }
                }
               if(delta>0 && num>0){//向上滚动
                   num--;
                   for (var n= 0; n< lis.length; n++) {
                     lis[n].className="";
                   }
                   arr[num].className="active";
               }else if(delta<0 && num<3){//向下滚动
                   num++;
                   for (var n= 0; n< lis.length; n++) {
                     lis[n].className="";
                   }
                   arr[num].className="active"; 
               }
               $("#wrapper").animate({top:(-100*num+"%")},500);
            }
     });

详细代码可右键查看源代码☺☺☺