摘要：使用說明函數調用參數說明大盒子標簽名大盒子名大盒子類名側導航每層盒子標簽名側導航每層盒子名側導航每層盒子類名任選一個傳入兼容性兼容火狐及以上。如果想兼容最好傳或者標簽名類名沒做處理或者可以自己再處理一下。這里寫上面封裝的函數

函數調用 new FullScreenScroll(obj)
obj 參數說明：
{    
outerTag: "大盒子標簽名（String）",
outerId: "大盒子id名（String）",
outerClass: "大盒子類名（String）",
tipTag: "側導航每層盒子標簽名（String）",
tipId: "側導航每層盒子id名（String）",
tipClass: "側導航每層盒子類名（String）"
}
Tag、Id、Class任選一個傳入

兼容 Google、火狐、IE7及以上。
如果想兼容IE最好傳id或者標簽名 類名沒做處理 或者可以自己再處理一下。

function FullScreenScroll(obj){
    // 外層盒子
    if(obj.outerTag){
        this.ul = document.getElementsByTagName(obj.outerTag)[0];
    }else if(obj.outerId){
        this.ul = document.getElementById(obj.outerId);
    }else{
        this.ul = document.querySelector("."+obj.outerClass);
    }
    // 內層每層盒子
    this.ulli = this.ul.children;
    // 側導航每層盒子
    if(obj.tipTag){
        this.ol = document.getElementsByTagName(obj.tipTag)[0];
    }else if(obj.tipId){
        this.ol = document.getElementById(obj.tipId);
    }else{
        this.ol = document.querySelector("."+obj.tipClass);
    }
    this.olli = this.ol.children;
    // 定時器
    this.timer = null;
    // 控制滾動的開關 防止滑動過快
    this.flag = true;
    // 獲取卷去的高度 兼容寫法
    this.docTop = document.documentElement.scrollTop||document.body.scrollTop;
    // 規定盒子的初始位置的下標
    this.num = Math.round(this.docTop/this.ulli[0].offsetHeight);
    // 初始化元素信息
    this.eleInit()
    // 初始化函數
    this.init()
    var _this = this
    this.addEvent(window,"resize",function(){
        for(var i=0;i<_this.ulli.length;i++){
            _this.ulli[i].style.height = document.documentElement.clientHeight + "px";
        }
    })
}
// 初始化元素信息
FullScreenScroll.prototype.eleInit = function(){
    this.ul.style.height = document.documentElement.clientHeight*this.ulli.length + "px";
}
// 初始化函數 
FullScreenScroll.prototype.init = function(){
    // 給每個側導航添加點擊事件
    for(var i=0;i0){
                _this.num--;
            }else{
                _this.num=0
            }
            var target = _this.num*_this.ulli[0].offsetHeight
            _this.move(target)
        }
    },function(){
        // 向下滾動處理函數
        if(_this.flag){
            _this.flag = false;
            clearInterval(_this.timer)
        if(_this.num<_this.ulli.length-1){
            _this.num++;
        }else{
            _this.num=_this.ulli.length-1;
        }
        var target = _this.num*_this.ulli[0].offsetHeight;
        _this.move(target)
        }
    })
}
// 每屏運動的函數 target 滾動結束位置
FullScreenScroll.prototype.move = function(target){
    var _this = this;
    this.timer = setInterval(function(){
        // 滾動起點
        // var leader = document.documentElement.scrollTop||document.body.scrollTop;
        var leader = _this.ul.offsetTop;
        // 步長 距離/n
        var step = (-target-leader)/10;
        // 當步長過小時 根據向上運動(step<0)或向下運動(step>0) 即 target-leader 大于0或小于0 向上取整或向下取整控制步長，否則步長一直減小，不會到達終點。
        step = step>0?Math.ceil(step):Math.floor(step);
        // 判斷是否到達終點
        // 會有 target-leader 不夠一個步長的情況 這個時候會發生抖動
        if(Math.abs(-target-leader)0){
            upfn();
        }else{
            downfn();
        }
    }
}
// 監聽事件兼容寫法 obj 操作對象 type 事件類型 fn 回調函數
FullScreenScroll.prototype.addEvent = function(obj,type,fn){
    if(document.addEventListener){
        obj.addEventListener(type,fn,false);
    }else{
        obj.attachEvent("on"+type,fn);
    }
}
// 調用
new FullScreenScroll({
    outerTag:"ul",
    tipTag:"ol"
})

當然啦！ html和css就需要自己寫了。
這里有一個簡單的丑陋的dome。

    
    
    


    

        

            
1
            
2
            
3
            
4
            
5
        
        

            
1
            
2
            
3
            
4
            
5