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>