全屏滚动封装（PC端）

摘要：使用说明函数调用参数说明大盒子标签名大盒子名大盒子类名侧导航每层盒子标签名侧导航每层盒子名侧导航每层盒子类名任选一个传入兼容性兼容火狐及以上。如果想兼容最好传或者标签名类名没做处理或者可以自己再处理一下。这里写上面封装的函数

函数调用 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