js全屏滚动效果

浏览数：21 / 时间：2015年06月09日

  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>