自己写的简单的FullPage插件

Posted 2020-09-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写的简单的FullPage插件相关的知识，希望对你有一定的参考价值。

用js的定时器写的小玩意...

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="container">
    <div id="page1">
        <p>我是第一页</p>
    </div>
    <div id="page2">
         <p>我是第二页</p>
    </div>
    <div id="page3">
         <p>我是第三页</p>
    </div>
    <div id="page4">
         <p>我是第四页</p>
    </div>
</div>
    <script src="FullPage.js"></script>
</body>
</html>

html部分父容器里放上几个div，每个div占一整屏

<style>
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            overflow: hidden;
        }
        #page1{
            background: coral;
            position: relative;
        }
        #page2{
            background: mediumspringgreen;
            position: relative;
        }
        #page3{
            background: #00bfbf;
            position: relative;
        }
        #page4{
            background: royalblue;
            position: relative;
        }
        p{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -33px -125px;
            font-size: 50px;
        }
        
    </style>

css嘛关键就是父容器要设置overflow: hidden;

window.onload = function () {
    pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘);
};
//改变页面大小做出变化
window.onresize = function () {
    pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘);
};

function pageHeight(){
    var windowHeight = window.innerHeight;//整个页面高度
    for(var i=0; i<arguments.length; i++){
        document.getElementById(arguments[i]).style.height = windowHeight + ‘px‘;
    }

    var flag = true; //在滚动时不影响
    var parObj = document.getElementById(arguments[0]);
    var maxHeight = (arguments.length-2)*windowHeight;
    function foo(e) {
        //判断滚动条滚动的方向
        var e=e||window.event;
        if(e.wheelDelta){
            //e.wheelDelta    其他浏览器识别的
            if(e.wheelDelta>0){
                //console.log("向上滚动");
                move(parObj, e.wheelDelta);

            }else{
                //console.log("向下滚动");
                move(parObj, e.wheelDelta);
            }
        }else if(e.detail){
            //e.detail是火狐浏览器识别
            if(e.detail>0){
                console.log("向下滚动");
                move(parObj, -e.detail);
            }else{
                console.log("向上滚动");
                move(parObj, -e.detail);
            }
        }
    }
    //绑定滚动事件
    if(document.addEventListener){
        document.addEventListener(‘DOMMouseScroll‘,foo,false);
    }
    //W3C
    window.onmousewheel=document.onmousewheel=foo;//IE/Opera/Chrome

    function move(parObj, wheelDelta){
        if (!flag) {
            return;
        }
        flag =false;
        if(wheelDelta>0){
            var tarHeight = parObj.scrollTop - windowHeight;
            if(tarHeight <= 0){
                tarHeight = 0;
            }else{
                tarHeight = parObj.scrollTop - windowHeight;
            }
            parObj.timer = setInterval(function () {
                if(parObj.scrollTop > tarHeight){
                    parObj.scrollTop = parObj.scrollTop + Math.floor((tarHeight - parObj.scrollTop)/10);
                }
                if(parObj.scrollTop == tarHeight){
                    clearInterval(parObj.timer);
                    flag = true;
                }
            }, 50);
        }else{
            var tarHeight = (windowHeight + parObj.scrollTop);
            if(tarHeight >= maxHeight){
                tarHeight = maxHeight;
            }else{
                tarHeight = (windowHeight + parObj.scrollTop);
            }
            parObj.timer = setInterval(function () {
                if(parObj.scrollTop < tarHeight){
                    parObj.scrollTop = parObj.scrollTop + Math.ceil((tarHeight - parObj.scrollTop)/10);
                }
                if(parObj.scrollTop == tarHeight){
                    clearInterval(parObj.timer);
                    flag = true;
                }
            }, 50);
        }
    }
}

js 监听滑轮，利用定时器移动一屏的高度

用的时候只要改变函数里的参数就可以了 pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘, ‘page5‘.....); 随着父容器里有多少子div传进去就ok

以上是关于自己写的简单的FullPage插件的主要内容，如果未能解决你的问题，请参考以下文章

Alvaro Trigo的fullPage插件。快速简单地创建全屏页面

fullPage竖屏滚动 vuereact版

fullpage.js简单教程

制作手机相册全屏滚动插件fullpage.js

拥抱单页网站! jQuery全屏滚动插件fullPage.js

学习 | jQuery全屏滚动插件FullPage.js