原生JS实现全屏切换以及导航栏滑动隐藏及显示——修改

之前的文章：原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

这篇文章对上面链接的文章的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;//兼容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()方法的内部
View Code

HTML代码和CSS代码没有修改。

posted @ 2017-01-15 10:53  Fogwind  阅读(807)  评论(0)  编辑  收藏  举报