码迷,mamicode.com
首页 > 其他好文 > 详细

full-page插件的使用

时间:2016-07-01 18:22:45      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

一、搭建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插件的使用

标签:

原文地址:http://www.cnblogs.com/beast-king/p/5633752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!