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>
