fullpage框架的使用

最新推荐文章于 2024-08-08 08:32:23 发布

ZhangXD_BLOG

最新推荐文章于 2024-08-08 08:32:23 发布

阅读量2.1k

点赞数

分类专栏： FullPage

本文链接：https://blog.csdn.net/u012054869/article/details/51823711

版权

FullPage 专栏收录该内容

1 篇文章 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>