1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both; position: relative;} 9 #tbody ul{ top:0px; left: 0px; position: absolute; width: 100%} 10 .box{ width:100%; margin: 0;} 11 .index1{background:rgb(45, 150, 103);} 12 .index2{ background:grey;} 13 .index3{ background: rgb(75, 136, 46);} 14 #nav {position: absolute; top:10px; left: 10px; z-index: 999} 15 #nav span{ background: #222222; color: #fff; width: 20px; height: 20px; border-radius: 20px; display: block; 16 text-align: center;line-height: 20px; float: left; margin-left: 10px; cursor: pointer; } 17 </style> 18 <script src="js/jquery.min.js"></script> 19 <script type="text/javascript" charset="utf-8"> 20 var height; 21 var isP=false; 22 var _index=0; 23 24 $(function(){ 25 SetSize(); 26 27 $(window).resize(function(){ 28 SetSize(); 29 }); 30 31 32 $("#nav span").click(function(){ 33 var index=$(this).index(); 34 $(this).attr("cur","cur").siblings().removeAttr("cur"); 35 start(index); 36 }) 37 38 39 var scrollFun=function(e) 40 { 41 if(!isP) 42 { 43 _index=$("#nav span[cur='cur']").index(); 44 } 45 isP=true; 46 47 e=e || window.event; 48 if(e.wheelDelta) 49 { 50 if(e.wheelDelta>0) 51 { 52 _index--; 53 } 54 55 if(e.wheelDelta<0) 56 { 57 _index++; 58 } 59 start(_index); 60 } 61 } 62 63 document.onmousewheel=scrollFun; 64 }); 65 66 function start(index) 67 { 68 index=index<0?0:index>2?2:index; 69 70 $("#tbody ul").animate({"top":-(index*height)},1000); 71 } 72 73 function SetSize() 74 { 75 var box=".box"; 76 var width=$(window).width(); 77 height=$(window).height(); 78 79 $(box).css("height",height); 80 $("#tbody").css("height",height); 81 82 } 83 </script> 84 </head> 85 <body> 86 <div id="nav"> 87 <span cur="cur">1</span> 88 <span>2</span> 89 <span>3</span> 90 </div> 91 <div id="tbody"> 92 <ul> 93 <li class="box index1"></li> 94 <li class="box index2"></li> 95 <li class="box index3"></li> 96 </ul> 97 98 </div> 99 </body> 100 </html>