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

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

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

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

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

    
    
    


    

        

            
1
            
2
            
3
            
4
            
5
        
        

            
1
            
2
            
3
            
4
            
5