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

巴特西

Html简单的整页切换

最新文章

热门文章