JS实现全屏页面切换

最新推荐文章于 2024-06-13 17:22:45 发布

JonathanChan94

最新推荐文章于 2024-06-13 17:22:45 发布

阅读量3.9k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Low_Key_Shulman/article/details/51246468

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以前在网上看到过一些全屏切换的页面，网上也有一些JQuery的插件能够实现全屏切换的效果，今天用原生js简单的做了一下这个效果。

1.实现原理

其实要做出这个效果还是挺简单的，下面来分析一下：
1.首先设置每个页面的div，让每个div的高度设置为100vh，即让每个div高度为窗口高度，或者可以设置每个div的高度为100%，但100%是相对父元素而言的，所以还需要给HTML、body的高度都设置为100%。
这个时候每个div的高度都是窗口高度了，但是大家看到的全屏切换一般都是没有滚动条的，就像是只有一个页面似的，所以还需要给body设置overflow：hidden的效果，这样就只显示一个页面。
2.然后在js部分要实现每次鼠标滚轮页面切换到下一个div，在js部分要处理好鼠标滚轮事件，获取窗口的高度，每次滚轮时，都让当前页面的高度增加一个窗口的高度。

2.实现步骤

下面展示一下我的代码，具体分析也写在了代码注释里：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*CSSreset默认边距都为0*/
    *{
        margin:0;
        padding:0;
    }
    /*显示一个页面*/
    body{
        overflow:hidden;
    }
    /*设置每个div的高度都为窗口高度*/
    div{
        height:100vh;
    }
    /*设置每个div的不同的背景色*/
    .section1{
        background:#eee;
    }
    .section2{
        background:lightblue;
    }
    .section3{
        background:lightgreen;
    }
    </style>
</head>
<body>
    <div class="section1">
        <h1>页面1</h1>
    </div>
    <div class="section2">
        <h1>页面2</h1>
    </div>
    <div class="section3">
        <h1>页面3</h1>
    </div>


    <script type="text/javascript">
        var ismoving=false;//使页面滚动时停止监听滚轮事件
        var pageH=document.documentElement.clientHeight;//获得当前窗口高度
        var allheight=document.documentElement.scrollHeight;//获得页面总高度
        //鼠标滚轮事件
        var scrollFunc=function(e){
            e=e||window.event;
            if(ismoving){//当页面正在滚动时停止监听滚动事件
                return;
            }else{
            //判断浏览器IE，谷歌滑轮事件(wheelDelta) FireFox滚轮事件(detail) 
                if(e.wheelDelta>0||e.detail<0){//当页面向上滚动时
                    // alert("向上滑");
                    var current=window.pageYOffset;//获取当前窗口显示区左上角的Y位置
                    if(current==0){//当前页面为第一页时禁止向上滚动
                        return;
                    }
                    pageScroll(-1,current);//执行滚动页面函数
                }
                if(e.wheelDelta<0||e.detail>0){//当页面向下滚动时
                    // alert("向下滑");
                    var current=window.pageYOffset;
                    if(current==allheight-pageH){//当前页面为最后一页时禁止向下滚动
                        return;
                    }
                    pageScroll(1,current);
                }
            }
        }
        //页面窗口大小改变时重新获取窗口高度
        window.onresize=function(){
            pageH=document.documentElement.clientHeight;
        }
        //绑定火狐浏览器的滚轮事件
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }
        //当滚轮发生时执行scrollFunc
        window.onmousewheel=document.onmousewheel=scrollFunc;
        // window.onmousewheel=scrollFunc;

        //滚动页面函数
        var timer=null;
        function pageScroll(speed,current){
            ismoving=true;//表明当前页面正在滚动
            if(speed>0){//如果速度为正表明正在向下滚动
                var allH=current+pageH;//获得目标位置
                //执行滚动的动画效果
                timer=setInterval(function(){
                    var cur=window.pageYOffset;//每次都重新获取当前窗口显示区左上角的Y位置
                    window.scrollTo(0,cur+speed);//让页面滚动到当前窗口Y加上speed的位置处
                    //为了让滚动有ease-in-out的效果，当滚动的距离大于需要滚动的高度的一半时降低速度
                    if(cur > (allH-(pageH/2))){
                        speed--;
                    }else{
                        speed++;
                    }
                    //当当前窗口显示区左上角Y位置超过了目标位置时
                    if(cur >= allH){
                        clearInterval(timer);//清除定时器
                        window.scrollTo(0,allH);//复原到目标位置
                        ismoving=false;//使鼠标滚轮可以监听
                    }
                },15)
            }else{
            //速度为负，即向上滚动时，步骤同上
                var allH=current-pageH;
                timer=setInterval(function(){
                    var cur=window.pageYOffset;
                    window.scrollTo(0,cur+speed);
                    if(cur < (allH+(pageH/2))){
                        speed++;
                    }else{
                        speed--;
                    }
                    if(cur <= allH){
                        clearInterval(timer);
                        window.scrollTo(0,allH);
                        ismoving=false;
                    }
                },15)
            }
        }
    </script>
</body>
</html>

这样的话一个最基本的全屏页面切换就做好了。

JonathanChan94

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JS实现全屏页面切换

以前在网上看到过一些全屏切换的页面，网上也有一些JQuery的插件能够实现全屏切换的效果，今天用原生js简单的做了一下这个效果。1.实现原理其实要做出这个效果还是挺简单的，下面来分析一下： 1.首先设置每个页面的div，让每个div的高度设置为100vh，即让每个div高度为窗口高度，或者可以设置每个div的高度为100%，但100%是相对父元素而言的，所以还需要给HTML、body的高度都设置为
复制链接

扫一扫