全屏滚动

      最近项目要做一个全屏垂直滚动的宣传效果，目前fullPage.js这个插件已经非常完美了，各种垂直滚动效果和回调功能都十分完善，能快速上手和完成项目开发需求。

但是自己的js基础非常差，写的也很烂，抱着学习的态度试着用原生来写，大部分的学习资料来源于http://fed.lvmama.com/2014/12，在此我只记录下自己学习过程中遇到的问题和解决方法。

     一.功能

    1.页面不能出现滚动条；

    2.每一屏的宽高刚好满屏，且适应不同分辨率和尺寸的电脑；

    3.支持菜单点击和鼠标滚动事件；

    二.布局 

       <div class="wrap">
             <div class="page page1">
                     PAGE1
             </div>
             <div class="page page2">
                     PAGE2
             </div>
             <div class="page page3">
                     PAGE3
             </div>
            <div class="page page4">
                     PAGE4
            </div>   

        </div>

        body{
              position: relative;
              overflow: hidden;
        }
      .wrap{
             position: absolute;
              100%;
             left: 0;
             top: 0;
       }
     .page{
            100%;
      }

    三.脚本语言

   1.点击菜单索引，页面滚动，闭包实现

   var lis = document.getElementsByTagName("li");

   for(var j = 0; j < lis.length; j++){
      lis[j].onclick = (function(val){
           return function(){
　　　　        pageIndex = val; //变更索引为点击的值
             pageScroll();
　　　}
   })(j)
}

  2.滚动鼠标触发屏幕滚动事件

    mouseScroll(document);
    function mouseScroll(elm){
        if(elm.addEventListener){
            elm.addEventListener('DOMMouseScroll',scrollFunc,false);
        }//W3C Firefox
    window.onmousewheel=elm.onmousewheel=scrollFunc;//IE/Opera/Chrome
};

  3.滚动动画

   timer = setInterval(function (){

      tempTop += 30;
      wap.style.top = tempTop + "px";

     //高度滚到计算的滚动值，则停止定时器
     if(tempTop == -newTop){
        clearInterval(timer);
    }
},10)