full-page插件的使用

Posted 有挫败才有成长

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了full-page插件的使用相关的知识,希望对你有一定的参考价值。

一、搭建full-page环境

1、依次下载jquery-3.0.0.min.js、jquery-ui-min.js和jquery.fullPage.js

//因为full-page是基于jquery开发的,所以必须要有jquery的支持;另要设置easing参数,所以也必须要有jquery-ui的支持。

二、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <!-- 引用full-page自带的css文件 -->
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <!-- 引用自己设置的css动画样式 -->
    <link rel="stylesheet" href="css/index.css">

    <style>
        /*改进右侧的导航界面,采用雪碧图的方式*/
        #fp-nav ul li a {/*未激活的样式*/
        float: right;
        width: 21px;
        height: 21px;
        color: #8F9DA4;
        text-decoration: none;
        text-align: right;
        background: url("images/nav-ico.png") 5px 5px no-repeat;
        }
        /*鼠标移上去激活的样式*/
        #fp-nav ul li .active {
            background-position: 0 bottom;
        }
        
    </style>
    
    <!-- 引用js文件 -->
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>

    <!-- 启动full-page -->
    <script>
        $(function() {
             $(#fullpage).fullpage({
            // ‘verticalCentered‘: false,
            anchors: [page1, page2, page3, page4],
            navigation: true,
            // ‘navigationColor‘:‘#cccccc‘,
            navigationPosition: right,
            navigationTooltips: [fullPage.js, Powerful, Amazing, Simple]
                })
        });
    </script>

</head>
<body>
    <div id="fullpage">

        <!-- 第一画面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page1-img.png" alt="">
            </div>
            <div class="bg11"></div><!-- 此处图片作动画 -->
            <div class="bg12"></div><!-- 此处图片作动画 -->
        </div>

        <!-- 第二画面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page2-img.png" alt="">
            </div>
        </div>

        <!-- 第三画面 -->
        <div class="section">
            <div class="bg">
                <img src="images/page3-img.png" alt="">
            </div>
        </div>

    </div>
</body>
</html>

三、index.css

.bg11{
    position: absolute;
    width: 79px;
    height: 263px;
    left: 0;
    top:140px;
    background: url("../images/bg11.png") no-repeat;
    opacity: 0;
    transition:all 1s;
}
.active .bg11{
    left: 400px;
    opacity: 1;
    transition-delay:0.7s;
}

.bg12{
    position: absolute;
    width: 943px;
    height: 587px;
    left: 25%;
    top:-15%;
    transform:scale(0.5,0.5);
    opacity: 0;
    background: url("../images/bg12.png") no-repeat;
    transition:all 1s;
}

.active .bg12{
    opacity: 1;
    transform:scale(1,1);
    transition-delay:.7s;
}

以上是关于full-page插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

vim代码片段插件ultisnips的使用

Wordpress - 将代码片段包含到布局的选定部分的插件

从零开始配置vim(27)——代码片段

#VSCode保存插件配置并使用 gist 管理代码片段

从零开始配置vim(27)——代码片段

从零开始配置vim(27)——代码片段