a-ling

导航

全屏滚动 

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>tab</title>
  7 
  8         <style type="text/css">
  9             html,
 10             body {
 11                 height: 100%;
 12             }
 13             
 14             body,
 15             ul,
 16             li,
 17             a,
 18             p,
 19             div {
 20                 padding: 0px;
 21                 margin: 0px;
 22                 font-size: 14px;
 23             }
 24             
 25             #wrap {
 26                 overflow: hidden;
 27                 width: 100%;
 28             }
 29             
 30             #main {
 31                 height: 2944px;
 32                 top: 0;
 33                 position: relative;
 34             }
 35             
 36             .page {
 37                 width: 100%;
 38                 margin: 0;
 39             }
 40             
 41             #page1 {
 42                 background: #E4E6CE;
 43             }
 44             
 45             #page2 {
 46                 background: #6CE26C;
 47             }
 48             
 49             #page3 {
 50                 background: #BF4938;
 51             }
 52             
 53             #page4 {
 54                 background: #2932E1;
 55             }
 56         </style>
 57     </head>
 58 
 59     <body>
 60         <div id="wrap">
 61             <div id="main">
 62                 <div id="page1" class="page"></div>
 63                 <div id="page2" class="page"></div>
 64                 <div id="page3" class="page"></div>
 65                 <div id="page4" class="page"></div>
 66             </div>
 67         </div>
 68         <script type="text/javascript">
 69             var wrap = document.getElementById("wrap");
 70             var main = document.getElementById("main");
 71             var hei = document.body.clientHeight;
 72             wrap.style.height = hei + "px";
 73             var obj = document.getElementsByTagName("div");
 74             for(var i = 0; i < obj.length; i++) {
 75                 if(obj[i].className == 'page') {
 76                     obj[i].style.height = hei + "px";
 77                 }
 78             }
 79             //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
 80             var startTime = 0, //翻屏起始时间  
 81                 endTime = 0,
 82                 now = 0;
 83             //浏览器兼容      
 84             if((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
 85                 document.addEventListener("DOMMouseScroll", scrollFun, false);
 86             } else if(document.addEventListener) {
 87                 document.addEventListener("mousewheel", scrollFun, false);
 88             } else if(document.attachEvent) {
 89                 document.attachEvent("onmousewheel", scrollFun);
 90             } else {
 91                 document.onmousewheel = scrollFun;
 92             }
 93 
 94             //滚动事件处理函数
 95             function scrollFun(event) {
 96                 startTime = new Date().getTime();
 97                 var delta = event.detail || (-event.wheelDelta);
 98                 //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
 99                 //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
100                 if((endTime - startTime) < -1000) {
101                     if(delta > 0 && parseInt(main.offsetTop) > -(hei * 3)) {
102                         //向下滚动
103                         now = now - hei;
104                         toPage(now);
105                     }
106                     if(delta < 0 && parseInt(main.offsetTop) < 0) {
107                         //向上滚动
108                         now = now + hei;
109                         toPage(now);
110                     }
111                     endTime = new Date().getTime();
112                 } else {
113                     event.preventDefault();
114                 }
115             }
116 
117             function toPage(now) {
118                 //$("#main").animate({ top: (now + 'px') }, 1000); //jquery实现动画效果
119                 setTimeout("main.style.top = now + 'px'",1000);     //javascript 实现动画效果
120             }
121         </script>
122     </body>
123 
124 </html>

 

posted on 2017-04-12 16:41  a-ling  阅读(133)  评论(0)    收藏  举报