之前的文章：
这篇文章对上面链接的文章的JS代码进行了修改，解决了文章中提到的bug，并对代码进行了适当的整理，比之前更加的清晰。
bug的解决的关键是删除了对时间间隔的判断。
JS代码：
1 function $(id) { 2 return document.getElementById(id); 3 } 4 5 //跨浏览器的添加事件的函数 6 function addHandler(element, type, handler) { 7 if(element.addEventListener) { 8 element.addEventListener(type, handler, false); 9 } else if(element.attachEvent) { 10 element.attachEvent('on' + type, handler); 11 } else { 12 element['on' + type] = handler; 13 } 14 } 15 16 //跨浏览器的添加mousewheel事件的函数 17 function addMouseWheelEvent(element,func) { 18 if(typeof element.onmousewheel == "object") { 19 addHandler(element,"mousewheel",func); 20 } 21 if(typeof element.onmousewheel == "undefined") { 22 //兼容Firefox 23 addHandler(element,"DOMMouseScroll",func); 24 } 25 } 26 /**********************************全屏滚动加导航条滑动显示/隐藏***************************************/ 27 ( function() { 28 function Obj(id,t) { 29 this.node = $(id); 30 this.t = t; 31 this.timer = null; 32 this.startDate = 0; 33 this.stopDate = 0; 34 } 35 36 Obj.prototype.getCurrentStyle = function() { 37 if(document.defaultView.getComputedStyle) { //DOM 2标准方法 38 return document.defaultView.getComputedStyle(this.node,null); 39 } else { 40 return this.node.currentStyle;//兼容IE方法 41 } 42 }; 43 44 /*******************************中小屏显示/隐藏导航栏中项目的代码*******************************/ 45 var navbarbtn = document.getElementById("navbar-toggle"); 46 //保存navbarbtn被点击了几次 47 navbarbtn.count = 0; 48 navbarbtn.onclick = function() { 49 var navbaritem = document.getElementById("navbar-item"); 50 if(navbarbtn.count === 0) { 51 //第一次点击时显示项目 52 navbaritem.className = "navbar-item-block"; 53 navbarbtn.count++; 54 } else { 55 //第二次点击时隐藏项目，并重置navbarbtn.count 56 navbaritem.className = "navbar-item-none navbar-item-block"; 57 navbarbtn.count = 0; 58 } 59 }; 60 61 /*******************************向左隐藏导航条，向右显示导航条**********************************/ 62 var nav = new Obj('nav',300) 63 nav.computedStyle = nav.getCurrentStyle(); //获取nav的计算样式表 64 nav.bool = true; //存储导航栏的状态，显示时为true，隐藏时为false 65 //向左隐藏 66 nav.navSlideLeft = function() { 67 if(nav.timer) { 68 clearInterval(nav.timer); 69 } 70 71 var width = parseInt(nav.computedStyle.width), speed = width/(nav.t/10), left = parseInt(nav.computedStyle.left); 72 if(!Boolean(left)) { 73 left = 0; 74 } 75 if(left > -width) { 76 nav.startDate = new Date(); 77 nav.timer = setInterval(function() { 78 nav.stopDate = new Date(); 79 if(nav.stopDate - nav.startDate < nav.t) { 80 left += -speed; 81 } else { 82 left = -width; 83 clearInterval(nav.timer); 84 } 85 nav.node.style.left = left + 'px'; 86 },10); 87 } else { 88 //添加清除计时器代码（2017-1-15更新） 89 clearInterval(nav.timer); 90 return; 91 } 92 }; 93 94 nav.navSlideRight = function() { 95 if(nav.timer) { 96 clearInterval(nav.timer); 97 } 98 99 var width = parseInt(nav.computedStyle.width), speed = width/(nav.t/10), left = parseInt(nav.computedStyle.left);100 if(left < 0) {101 nav.startDate = new Date();102 nav.timer = setInterval(function() {103 nav.stopDate = new Date();104 if(nav.stopDate - nav.startDate < nav.t) {105 left += speed; 106 } else {107 left = 0;108 clearInterval(nav.timer);109 }110 nav.node.style.left = left + 'px';111 },10);112 } else {113 //添加清除计时器代码（2017-1-15更新）114 clearInterval(nav.timer);115 return;116 }117 };118 119 /********************************全屏滚动代码**********************************/120 var pageBox = new Obj('page-box',300);121 pageBox.computedStyle = pageBox.getCurrentStyle();122 123 //获取有几屏124 pageBox.pageChildren = pageBox.node.getElementsByTagName('div').length;125 126 //切换计数127 pageBox.num = 1;128 129 //超时调用ID，优化mousewheel事件，防止连续触发130 pageBox.mousewheelTimer = null;131 132 pageBox.pageSlideUp = function(num) {133 if(pageBox.timer) {134 clearInterval(pageBox.timer);135 }136 var height = parseInt(pageBox.computedStyle.height);137 var top = parseInt(pageBox.computedStyle.top);138 var speed = height/(pageBox.t/10);139 pageBox.startDate = new Date();140 pageBox.timer = setInterval(function() {141 pageBox.stopDate = new Date();142 if(pageBox.stopDate - pageBox.startDate < pageBox.t) {143 top += -speed;144 } else {145 top = -height*num;146 clearInterval(pageBox.timer);147 }148 pageBox.node.style.top = top + "px";149 },10);150 };151 152 pageBox.pageSlideDown = function(num) {153 if(pageBox.timer) {154 clearInterval(pageBox.timer);155 }156 var height = parseInt(pageBox.computedStyle.height);157 var top = parseInt(pageBox.computedStyle.top);158 var speed = height/(pageBox.t/10);159 pageBox.startDate = new Date();160 pageBox.timer = setInterval(function() {161 pageBox.stopDate = new Date();162 if(pageBox.stopDate - pageBox.startDate < pageBox.t) {163 top += speed;164 } else {165 top = -height*num;166 clearInterval(pageBox.timer);167 }168 pageBox.node.style.top = top + "px";169 },10);170 };171 172 173 pageBox.mouseWheelListener = function(event) {174 //通过超时调用优化滚动事件175 if(pageBox.mousewheelTimer) {176 clearTimeout(pageBox.mousewheelTimer);177 }178 event = event || window.event;179 //获取滚动方向180 var wheelDelta;181 if(event.wheelDelta) {182 wheelDelta = event.wheelDelta;183 } else {184 wheelDelta = -event.detail;//兼容Firefox185 }186 187 //当连续两次滚动鼠标滚轮的时间间隔小于pageBox.t时，不触发滚动效果188 if((pageBox.stopDate - pageBox.startDate > 0) && (pageBox.stopDate - pageBox.startDate < pageBox.t)) {189 return;190 }191 192 193 //当滚轮向后滚动时194 if(wheelDelta < 0) {195 if(pageBox.num <= pageBox.pageChildren - 1) {196 pageBox.mousewheelTimer = setTimeout(pageBox.pageSlideUp(pageBox.num),20);197 pageBox.num++;//最后等于pageBox.pageChildren，这里为4198 } else { 199 return;200 } 201 } else { //当滚轮向前滚动时202 if(pageBox.num <= pageBox.pageChildren && pageBox.num > 1) {203 pageBox.num--;204 pageBox.mousewheelTimer = setTimeout(pageBox.pageSlideDown(pageBox.num-1),20);205 } else {206 pageBox.num = 1;207 return;208 }209 }210 211 //隐藏导航条 212 //导航栏高度固定为50px213 if(parseInt(pageBox.computedStyle.width) > 768 && event.clientY > 50) {214 if(pageBox.num == 2 && nav.bool) {215 nav.navSlideLeft();216 nav.bool = false;217 }218 if(pageBox.num == 1 && !nav.bool) {219 nav.navSlideRight();220 nav.bool = true;221 }222 }223 };224 225 //给document添加鼠标滚动事件226 addMouseWheelEvent(document,pageBox.mouseWheelListener);227 228 //保存超时调用ID，优化resize事件，防止连续触发229 var resizeTimer = null;230 //视口宽度小于768时，导航条不隐藏，大于768时才隐藏231 //同时保证全屏切换时，每一屏的高度始终等于视口高度232 window.onresize = function() {233 if (resizeTimer) {234 clearTimeout(resizeTimer)235 }236 resizeTimer = setTimeout(function() {237 pageBox.node.style.top = (-parseInt(pageBox.computedStyle.height)*(pageBox.num-1)) + "px";238 239 //最小化时显示导航条240 if(parseInt(pageBox.computedStyle.width) < 768) {241 nav.node.style.left = '0px';242 nav.bool = true;243 } 244 //最大化时先显示导航条，再滑动隐藏导航条245 if(parseInt(pageBox.computedStyle.width) >= 768 && pageBox.num != 1) {246 nav.node.style.left = '0px';247 nav.navSlideLeft();248 nav.bool = false;249 }250 251 252 },20);253 };254 255 var navhead = document.getElementById('nav-head');256 navhead.onmouseover = function(event) {257 event = event || window.event;258 event.target = event.srcElement || event.target; 259 260 //防止navhead的子元素触发事件（也可以阻止事件冒泡）261 if(event.target.id != this.id) { //换成判断id262 return;263 }264 if(pageBox.num == 1 || parseInt(pageBox.computedStyle.width) < 768 ) {265 return;266 }267 268 if(!nav.bool) {269 nav.navSlideRight();270 nav.bool = true;271 }272 };273 274 pageBox.node.onmouseover = function(event) {275 if(pageBox.num == 1 || parseInt(pageBox.computedStyle.width) < 768 ) {276 return;277 }278 //alert(1);279 event = event || window.event;280 281 if(parseInt(pageBox.computedStyle.width) > 768 && pageBox.num != 1) {282 if(nav.bool) {283 nav.navSlideLeft();284 nav.bool = false;285 }286 }287 if(parseInt(pageBox.computedStyle.width) > 768 && pageBox.num == 1) {288 if(!nav.bool) {289 nav.navSlideRight();290 nav.bool = true;291 }292 }293 294 };295 } )();296 //改进余地：把nav.bool 集成到导航条的navSlideLeft()和navSlideRight()方法的内部 HTML代码和CSS代码没有修改。