fullpage框架的使用

迈不过友情╰ 2022-09-23 03:59 96阅读 0赞

*  滑动鼠标滑轮，滚动屏幕

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第1节-滑动鼠标滑轮，滚动屏幕</title>
        <link href="jquery.fullPage.css" rel="stylesheet" type="text/css" />
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section{
                text-align: center;
                font-size: 50px;
                color: #fff;
            }
        </style>
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <script>
            $(function(){
                $("#box").fullpage({
                    sectionsColor:["red","yellow","green","blue"]
                });
            });
        </script>
    </head>
    <body>
    <div id="box">
        <div class="section">
            <h1>第一屏</h1>
        </div>
        <div class="section">
            <div class="slide">第二屏的第一屏</div>
            <div class="slide">第二屏的第二屏</div>
            <div class="slide">第二屏的第三屏</div>
    
        </div>
        <div class="section">
            <h1>第三屏</h1>
        </div>
        <div class="section">
            <h1>第四屏</h1>
        </div>
    </div>
    </body>
    </html>

*  将背景替换为图片

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第2节-将背景替换为图片</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
    
        </style>
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <script>
            $(function(){
                $("#dowebox").fullpage();
            });
        </script>
    </head>
    <body>
    <div id="dowebox">
        <div class="section section1"></div>
        <div class="section section2"></div>
        <div class="section section3"></div>
        <div class="section section4"></div>
    </div>
    </body>
    </html>

*  滚到最后一屏继续滚可回到第一屏

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第3节-滚到最后一屏继续滚可回到第一屏</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
    
        </style>
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    //循环切换，写在fullpage函数里
                    continuousVertical:true
                });
            });
        </script>
    </head>
    <body>
    <div id="dowebox">
        <div class="section section1"></div>
        <div class="section section2"></div>
        <div class="section section3"></div>
        <div class="section section4"></div>
    </div>
    </body>
    </html>

*  使用回调函数，为页面加上动画

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第4节-使用回调函数。为页面加上动画</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
    
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    afterLoad:function(anchorLink,index){
                        if(index==1){
                            $("#p1").animate({"left":"0"},1000);
                        }
    
                    },
                    onLeave:function(index,direction){
                        if(index==1){
                            $("#p1").css("left","-120%");
                        }
                    },
                });
            });
        </script>
    </head>
    <body>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section section3">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>

*  点击菜单滚动屏幕

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第5节-点击菜单滚动屏幕</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
            #menu{
                position: fixed;
                z-index: 10;
            }
            #menu{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #menu li{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                width: 100px;
                height: 30px;
                background-color: #dda18f;
                text-align: center;
                line-height: 30px;
            }
            #menu li a{
                color: #fff;
                text-decoration: none;
            }
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    anchors:["page1","page2","page3","page4"],
                    menu:"#menu"
                });
            });
        </script>
    </head>
    <body>
    <ul id="menu">
        <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
    </ul>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section section3">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>

*  在项目右边中部带有小圆点，就是项目导航

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第6节-在项目右边中部带有小圆点，就是项目导航</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
            #menu{
                position: fixed;
                z-index: 10;
            }
            #menu{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #menu li{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                width: 100px;
                height: 30px;
                background-color: #dda18f;
                text-align: center;
                line-height: 30px;
            }
            #menu li a{
                color: #fff;
                text-decoration: none;
            }
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    anchors:["page1","page2","page3","page4"],
                    menu:"#menu",
                    //圆点显示
                    navigation:"true",
                    //显示在左侧
                    navigationPosition:"left",
                    //鼠标滑过圆点显示文字
                    navigationTooltips:["主页","相册","说说","留言板"],
                    //颜色不支持
                    navigationColor:"red"
                });
            });
        </script>
    </head>
    <body>
    <ul id="menu">
        <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
    </ul>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section section3">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>

*  定时滚屏

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第7节-定时滚屏</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
            #menu{
                position: fixed;
                z-index: 10;
            }
            #menu{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #menu li{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                width: 100px;
                height: 30px;
                background-color: #dda18f;
                text-align: center;
                line-height: 30px;
            }
            #menu li a{
                color: #fff;
                text-decoration: none;
            }
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    anchors:["page1","page2","page3","page4"],
                    menu:"#menu",
                    //圆点显示
                    navigation:"true",
                    //显示在左侧
                    navigationPosition:"left",
                    //鼠标滑过圆点显示文字
                    navigationTooltips:["主页","相册","说说","留言板"],
                    //颜色不支持
                    navigationColor:"red"
                });
                //定时滚屏
                setInterval(function(){
                    $.fn.fullpage.moveSectionDown();
                },2000);
            });
        </script>
    </head>
    <body>
    <ul id="menu">
        <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
    </ul>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section section3">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>

*  横屏自动滚动

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第7节-定时滚屏</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
            #menu{
                position: fixed;
                z-index: 10;
            }
            #menu{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #menu li{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                width: 100px;
                height: 30px;
                background-color: #dda18f;
                text-align: center;
                line-height: 30px;
            }
            #menu li a{
                color: #fff;
                text-decoration: none;
            }
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    anchors:["page1","page2","page3","page4"],
                    menu:"#menu",
                    //圆点显示
                    navigation:"true",
                    //显示在左侧
                    navigationPosition:"left",
                    //鼠标滑过圆点显示文字
                    navigationTooltips:["主页","相册","说说","留言板"],
                    //颜色不支持
                    navigationColor:"red"
                });
                //定时滚屏
                setInterval(function(){
                    $.fn.fullpage.moveSlideRight();
                },3000);
            });
        </script>
    </head>
    <body>
    <ul id="menu">
        <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
    </ul>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section">
            <div class="slide section3">第三页1</div>
            <div class="slide section3">第三页2</div>
            <div class="slide section3">第三页3</div>
            <div class="slide section3">第三页4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>

*  根据可视区域大小自适应样式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第9节-根据可视区域大小自适应样式</title>
        <link rel="stylesheet" href="jquery.fullPage.css">
        <script src="jquery-1.12.3.js"></script>
        <script src="jquery.fullPage.min.js"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .section1{
                background:url(image/1.jpg) 50%;
            }
            .section2{
                background:url(image/2.jpg) 50%;
            }
            .section3{
                background:url(image/3.jpg) 50%;
            }
            .section4{
                background:url(image/4.jpg) 50%;
            }
            #dowebox{
                text-align: center;
                color: #bd4040;
                font-size: 30px;
            }
            #p1{
                position: relative;
                left: -120%;
            }
            #menu{
                position: fixed;
                z-index: 10;
            }
            #menu{
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            #menu li{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                width: 100px;
                height: 30px;
                background-color: #dda18f;
                text-align: center;
                line-height: 30px;
            }
            #menu li a{
                color: #fff;
                text-decoration: none;
            }
        </style>
        <script>
            $(function(){
                $("#dowebox").fullpage({
                    continuousVertical:"true",
                    anchors:["page1","page2","page3","page4"],
                    menu:"#menu",
                    //圆点显示
                    navigation:"true",
                    //显示在左侧
                    navigationPosition:"left",
                    //鼠标滑过圆点显示文字
                    navigationTooltips:["主页","相册","说说","留言板"],
                    //颜色不支持
                    navigationColor:"red"
                });
                //定时滚屏
                setInterval(function(){
                    $.fn.fullpage.moveSectionDown();
                },2000);
                //自适应
                $(window).resize(function(){
                    autosize();
                });
                function autosize(){
                    var $width=$(window).width();
                    if($width>1024){
                        $.fn.fullpage.setAutoScrolling(false);
                    }else {
                        $.fn.fullpage.setAutoScrolling(true);
                    }
                }
    
            });
        </script>
    </head>
    <body>
    <ul id="menu">
        <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
        <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
        <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
        <li data-menuanchor="page4"><a href="#page4">第四页</a></li>
    </ul>
    <div id="dowebox">
        <div class="section section1">
            <h1>第一页</h1>
            <p id="p1">我是第一页的文字内容</p>
        </div>
    
        <div class="section section2">
            <h1>第二页</h1>
            <p id="p2">我是第二页的文字内容</p>
        </div>
    
        <div class="section section3">
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
            <div class="slide">4</div>
        </div>
    
        <div class="section section4">
            <h1>第四页</h1>
            <p id="p4">我是第四页的文字内容</p>
        </div>
    </div>
    </body>
    </html>