之前的文章:原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
这篇文章对上面链接的文章的JS代码进行了修改,解决了文章中提到的bug,并对代码进行了适当的整理,比之前更加的清晰。
bug的解决的关键是删除了对时间间隔的判断。
JS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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;//兼容Firefox 185 } 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,这里为4 198 } 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 //导航栏高度固定为50px 213 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) {//换成判断id 262 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代码没有修改。