js 全屏滚动

最新推荐文章于 2022-11-28 10:28:46 发布

weixin_30564901

最新推荐文章于 2022-11-28 10:28:46 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/nuomizong/p/5973244.html

版权

尝试着自己写一个全屏滚动的代码，结果写出来的效果是这样的：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <div class="main">
        <div class="roll">
            <div class="web" style="background:url(bg1.jpg)"></div>
            <div class="web" style="background:url(bg2.jpg)"></div>
        </div>
    </div>

    <script src="1.js"></script>
</body>
</html>

1.js

var vH = window.innerHeight;

var slider = {
    //初始化
    init : function(main,roll,web) {
        this.main = document.getElementsByClassName(main)[0],
        this.roll = document.getElementsByClassName(roll)[0],
        this.webs = document.getElementsByClassName(web),
        this.position = {
            top:0,
            left:0
        },

        this.main.style.height = vH+"px";
        this.main.style.overflow = "hidden";

        this.roll.style.position = "relative";
        this.roll.style.transition = "all 700ms ease";

        for (var i = 0; i < this.webs.length; i++) {
            this.webs[i].style.height = vH+"px";
        }

        this.listen();
    },

    // 监听
    listen : function(){

        if(document.addEventListener){ 
            document.addEventListener('DOMMouseScroll',this.scroll,false); 
        }
        window.onmousewheel=document.onmousewheel=this.scroll;
        
        this.main.addEventListener('touchstart',this.touch,false);
    },

    // 滚轮事件
    scroll : function(e){
        var vaule = -e.wheelDelta || e.detail;
        vaule > 0 ? slider.go("next") : slider.go("prev");
    },

    // 触控事件
    touch : {
        handleEvent:function(e){
            if(e.type == 'touchstart'){
                this.start(e);
            }else if(e.type == 'touchmove'){
                this.move(e);
            }else if(e.type == 'touchend'||e.type == 'touchcancel'){
                this.end(e);
            }
        },

        start:function(e){
            this.startPos = e.targetTouches[0];
            slider.main.addEventListener('touchmove',this,false); 
            slider.main.addEventListener('touchend',this,false); 
            slider.main.addEventListener('touchcancel',this,false);
        },
        move:function(e){
            this.endPos = e.targetTouches[0];
        },
        end:function(e){

            if(this.startPos.pageY - this.endPos.pageY > 0)
                slider.go("next")
            if(this.startPos.pageY - this.endPos.pageY < 0)
                slider.go("prev")

            slider.main.removeEventListener('touchmove',this,false); 
            slider.main.removeEventListener('touchend',this,false); 
        }
    },

    go : function(vaule){

        var maxH = this.roll.offsetHeight;
        this.position = this.getPosition(this.roll.style.webkitTransform);

        if(vaule == "next")
            x = Math.abs(this.position.top - vH) >= maxH ? (vH - maxH) : (this.position.top - vH);
        if(vaule == "prev")
            x = (Number(this.position.top) + vH) > 0 ? 0 : (Number(this.position.top) + vH);

        this.roll.style.webkitTransform = "translate3d(0px, "+(x-1)+"px, 0px)";
        setTimeout(function(){slider.roll.style.webkitTransform = "translate3d(0px, "+x+"px, 0px)";},701);
    },


    // 解析某个 webkitTransform 值
    getPosition : function(webkitTransform){
        if(webkitTransform){
        this.position.left = webkitTransform.match(/-?\d+/g)[1];
        this.position.top = webkitTransform.match(/-?\d+/g)[2];
        }
        return this.position;
    }

}

slider.init('main','roll','web');

动画的话是用了css3，我发现在uc里面 transform 并没有起作用，查了下原来它是认 webkit-transform 的，之后是触控也有问题，uc没有 touchend 事件与之对应的是一个 touchcancel 事件，好吧，最后在uc里倒是动作了，但还有个问题，uc向上滑动时过渡效果消失了，我怀疑是向上滑动（用户向下浏览）时uc将 transition 的效果设置成0秒了，测试过后才知道uc会固定跳过第二个过渡效果，于是将过渡效果拆分成两步。

转载于:https://www.cnblogs.com/nuomizong/p/5973244.html