Html简单的整页切换 

恩，语言组织不是很好，直接上代码吧。。。。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            padding: 0;
            margin:0;
            width: 100%;
            height: 100%;
            overflow:hidden;
        }
        .main{
            position:absolute;
            width:400%;
            height: 100%;
        }
        .cont{

            width: 100%;
            height:100%;

        }
        .cont.cont-1{
            width: 25%;
            background-color: aquamarine;
        }
        .cont.cont-2{
            width: 25%;
            background-color:blueviolet;
        }
        .cont.cont-3{
            width: 25%;
            background-color:salmon;
        }
        .cont.cont-4{
            width: 25%;
            background-color: darkorange;
        }
    </style>
</head>
<body>
<div class="main sweel">
    <div class="cont cont-1">1</div>
    <div class="cont cont-2">2</div>
    <div class="cont cont-3">3</div>
    <div class="cont cont-4">4</div>
    <div class="cont cont-1">5</div>
</div>

<script src="jquery-1.11.3.min.js"></script>
<script src="sweel.js"></script>
<script>
    $(function () {

        var def={
            color:"green",
            opacity:0.8
        }
//        var c =new Sweel($(".sweel"),def);
        Sweel.int($(".sweel"),def);
    });

</script>
</body>
</html>

　　sweel.js  JS部分：

/**
 * Created by Administrator on 2015/7/9.
 */
;(function($){
    var gol=0;//存放当前滚动页，用于resize（）事件调用

    var Sweel= function (res,def) {

        this.def={//默认配置 自行扩展
            color:"red",    //颜色
            opacity:0.8    //透明度
        }

        //这里并没有判断def为空或者未定义（实际上需要）
        this.def= $.extend(this.def,def)
        this.colo=  this.def.color;
        this.opac=  this.def.opacity;
        this.setVal($(res).find(".cont-1"));
        this.addEvent(res,$(res).children().size());
        this.reSize( res);
    };

    Sweel.prototype={
        //监听屏幕大小改变

        reSize: function (page) {
            $(window).bind('resize', function() {
                $(page).css({"top":-(document.body.clientHeight)*(gol)});

            })
        },
        //根据参数设置相关
        setVal:function(res){

            $(res).css({"background-color":this.colo,"opacity":this.opac})

        },
        //监听滚轮
        addEvent: function (res,size) {
            var type;//
            type= navigator.userAgent.indexOf("Firefox")<0?"mousewheel":"DOMMouseScroll";//区分火狐

            var count=0;  //滚动次数
            var page=res; //当前dom
            var a2=0;     //当前动位置在第几页

            res.addEventListener(type, function (e) {//绑定事件===滚轮事件监听
                count++;
                var delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;//delta>0上翻滚相反下翻滚
                if(delta>0&&count%4==0){
                    a2--;
                    if(a2<0){
                        a2=0;
                    }
                    gol=a2;
                    $(page).animate({"top":-(document.body.clientHeight)*(a2)}, 1000);//动画过度效果
                }
                if(delta<0&&count%4==0){
                    a2++;
                    if(a2>=size){a2=size-1}
                    gol=a2;
                    $(page).animate({"top":-(document.body.clientHeight)*(a2)}, 1000);
                }


            },false);

        }
    };

    Sweel.int= function (obj,deft) {//初始化函数

        obj.each(function(i){
            new Sweel(this,deft);//实例化对象
        });

    }
    window["Sweel"]=Sweel;//全局注册
})(jQuery)

 DEMO地址：  http://runjs.cn/detail/zinwycyz

posted @ 2015-07-10 14:50  薄祸  阅读(1017)  评论(0)    收藏  举报