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

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

这篇文章对上面链接的文章的JS代码进行了修改，解决了文章中提到的bug，并对代码进行了适当的整理，比之前更加的清晰。

bug的解决的关键是删除了对时间间隔的判断。

点我看在线演示

JS代码：

function $(id) {
   return document.getElementById(id);
}

//跨浏览器的添加事件的函数
function addHandler(element, type, handler) {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else if(element.attachEvent) {
      element.attachEvent('on' + type, handler);
   } else {
      element['on' + type] = handler;
   }
}
  
//跨浏览器的添加mousewheel事件的函数
function addMouseWheelEvent(element,func) {    
   if(typeof element.onmousewheel == "object") {
      addHandler(element,"mousewheel",func);
   } 
   if(typeof element.onmousewheel == "undefined") {
      //兼容Firefox
      addHandler(element,"DOMMouseScroll",func);
   }
}
/**********************************全屏滚动加导航条滑动显示/隐藏***************************************/
( function() {
function Obj(id,t) {
   this.node = $(id);
   this.t = t;
   this.timer = null;
   this.startDate = 0;
   this.stopDate = 0;
}

Obj.prototype.getCurrentStyle = function() {
   if(document.defaultView.getComputedStyle) { //DOM 2标准方法
      return document.defaultView.getComputedStyle(this.node,null);
   } else {
      return this.node.currentStyle;//兼容IE方法
   }
};

  /*******************************中小屏显示/隐藏导航栏中项目的代码*******************************/
  var navbarbtn = document.getElementById("navbar-toggle");
  //保存navbarbtn被点击了几次
  navbarbtn.count = 0;
  navbarbtn.onclick = function() {
      var navbaritem = document.getElementById("navbar-item");
      if(navbarbtn.count === 0) {
         //第一次点击时显示项目
         navbaritem.className = "navbar-item-block";
         navbarbtn.count++;
      } else {
         //第二次点击时隐藏项目，并重置navbarbtn.count
         navbaritem.className = "navbar-item-none navbar-item-block";
         navbarbtn.count = 0;
      } 
  };

  /*******************************向左隐藏导航条，向右显示导航条**********************************/
  var nav = new Obj('nav',300)
  nav.computedStyle = nav.getCurrentStyle(); //获取nav的计算样式表
  nav.bool = true; //存储导航栏的状态，显示时为true，隐藏时为false
  //向左隐藏
  nav.navSlideLeft = function() {
      if(nav.timer) {
        clearInterval(nav.timer);
      }

      var width = parseInt(nav.computedStyle.width), speed = width/(nav.t/10), left = parseInt(nav.computedStyle.left);
      if(!Boolean(left)) {
        left = 0;
      }
      if(left > -width) {
         nav.startDate = new Date();
         nav.timer = setInterval(function() {
            nav.stopDate = new Date();
            if(nav.stopDate - nav.startDate < nav.t) {
              left += -speed;
            } else {
              left = -width;
              clearInterval(nav.timer);
            }
            nav.node.style.left = left + 'px';
         },10);
      } else {
         //添加清除计时器代码（2017-1-15更新）
         clearInterval(nav.timer);
         return;
      }    
  };

  nav.navSlideRight = function() {
      if(nav.timer) {
        clearInterval(nav.timer);
      }
      
      var width = parseInt(nav.computedStyle.width), speed = width/(nav.t/10), left = parseInt(nav.computedStyle.left);
      if(left < 0) {
         nav.startDate = new Date();
         nav.timer = setInterval(function() {
            nav.stopDate = new Date();
            if(nav.stopDate - nav.startDate < nav.t) {
              left += speed; 
            } else {
              left = 0;
              clearInterval(nav.timer);
            }
            nav.node.style.left = left + 'px';
         },10);
      } else {
         //添加清除计时器代码（2017-1-15更新）
         clearInterval(nav.timer);
         return;
      }
  };

  /********************************全屏滚动代码**********************************/
  var pageBox = new Obj('page-box',300);
  pageBox.computedStyle = pageBox.getCurrentStyle();

  //获取有几屏
  pageBox.pageChildren = pageBox.node.getElementsByTagName('div').length;

  //切换计数
  pageBox.num = 1;

  //超时调用ID，优化mousewheel事件，防止连续触发
  pageBox.mousewheelTimer = null;

  pageBox.pageSlideUp = function(num) {
      if(pageBox.timer) {
         clearInterval(pageBox.timer);
      }
      var height = parseInt(pageBox.computedStyle.height);
      var top = parseInt(pageBox.computedStyle.top);
      var speed = height/(pageBox.t/10);
      pageBox.startDate = new Date();
      pageBox.timer = setInterval(function() {
         pageBox.stopDate = new Date();
         if(pageBox.stopDate - pageBox.startDate < pageBox.t) {
            top += -speed;
         } else {
            top = -height*num;
            clearInterval(pageBox.timer);
         }
         pageBox.node.style.top = top + "px";
      },10);
  };

  pageBox.pageSlideDown =  function(num) {
      if(pageBox.timer) {
         clearInterval(pageBox.timer);
      }
      var height = parseInt(pageBox.computedStyle.height);
      var top = parseInt(pageBox.computedStyle.top);
      var speed = height/(pageBox.t/10);
      pageBox.startDate = new Date();
      pageBox.timer = setInterval(function() {
         pageBox.stopDate = new Date();
         if(pageBox.stopDate - pageBox.startDate < pageBox.t) {
            top += speed;
         } else {
            top = -height*num;
            clearInterval(pageBox.timer);
         }
         pageBox.node.style.top = top + "px";
      },10);
  };


  pageBox.mouseWheelListener = function(event) {
      //通过超时调用优化滚动事件
      if(pageBox.mousewheelTimer) {
         clearTimeout(pageBox.mousewheelTimer);
      }
      event = event || window.event;
      //获取滚动方向
      var wheelDelta;
      if(event.wheelDelta) {
         wheelDelta = event.wheelDelta;
      } else {
         wheelDelta = -event.detail;//兼容Firefox
      }
    
      //当连续两次滚动鼠标滚轮的时间间隔小于pageBox.t时，不触发滚动效果
      if((pageBox.stopDate - pageBox.startDate > 0) && (pageBox.stopDate - pageBox.startDate < pageBox.t)) {
         return;
      }


      //当滚轮向后滚动时
      if(wheelDelta < 0) {
         if(pageBox.num <= pageBox.pageChildren - 1) {
            pageBox.mousewheelTimer = setTimeout(pageBox.pageSlideUp(pageBox.num),20);
            pageBox.num++;//最后等于pageBox.pageChildren，这里为4
         } else { 
            return;
         }     
      } else {//当滚轮向前滚动时
         if(pageBox.num <= pageBox.pageChildren && pageBox.num > 1) {
            pageBox.num--;
            pageBox.mousewheelTimer = setTimeout(pageBox.pageSlideDown(pageBox.num-1),20);
         } else {
            pageBox.num = 1;
            return;
         }
      }
    
     //隐藏导航条  
     //导航栏高度固定为50px
      if(parseInt(pageBox.computedStyle.width) > 768 && event.clientY > 50) {
         if(pageBox.num == 2 && nav.bool) {
            nav.navSlideLeft();
            nav.bool = false;
         }
         if(pageBox.num == 1 && !nav.bool) {
            nav.navSlideRight();
            nav.bool = true;
         }
      }
  };

//给document添加鼠标滚动事件
addMouseWheelEvent(document,pageBox.mouseWheelListener);

//保存超时调用ID，优化resize事件，防止连续触发
var resizeTimer = null;
//视口宽度小于768时，导航条不隐藏，大于768时才隐藏
//同时保证全屏切换时，每一屏的高度始终等于视口高度
window.onresize = function() {
   if (resizeTimer) {
      clearTimeout(resizeTimer)
   }
   resizeTimer = setTimeout(function() {
      pageBox.node.style.top = (-parseInt(pageBox.computedStyle.height)*(pageBox.num-1)) + "px";
        
      //最小化时显示导航条
      if(parseInt(pageBox.computedStyle.width) < 768) {
         nav.node.style.left = '0px';
         nav.bool = true;
      } 
      //最大化时先显示导航条，再滑动隐藏导航条
      if(parseInt(pageBox.computedStyle.width) >= 768 && pageBox.num != 1) {
         nav.node.style.left = '0px';
         nav.navSlideLeft();
         nav.bool = false;
      }
          
       
   },20);
};

var navhead = document.getElementById('nav-head');
navhead.onmouseover = function(event) {
   event = event || window.event;
   event.target = event.srcElement || event.target; 

   //防止navhead的子元素触发事件（也可以阻止事件冒泡）
   if(event.target.id != this.id) {//换成判断id
      return;
   }
   if(pageBox.num == 1 || parseInt(pageBox.computedStyle.width) < 768 ) {
      return;
   }
    
   if(!nav.bool) {
      nav.navSlideRight();
      nav.bool = true;
   }
};

pageBox.node.onmouseover = function(event) {
   if(pageBox.num == 1 || parseInt(pageBox.computedStyle.width) < 768 ) {
      return;
   }
   //alert(1);
   event = event || window.event;
    
   if(parseInt(pageBox.computedStyle.width) > 768 && pageBox.num != 1) {
      if(nav.bool) {
         nav.navSlideLeft();
         nav.bool = false;
      }
   }
   if(parseInt(pageBox.computedStyle.width) > 768 && pageBox.num == 1) {
      if(!nav.bool) {
         nav.navSlideRight();
         nav.bool = true;
      }
   }
    
};
} )();
//改进余地：把nav.bool 集成到导航条的navSlideLeft()和navSlideRight()方法的内部

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