full-page插件的使用

最新推荐文章于 2020-12-19 10:23:26 发布

diyinjiao1404

最新推荐文章于 2020-12-19 10:23:26 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beast-king/p/5633752.html

版权

一、搭建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;
}

四、雪碧图背景图片

转载于:https://www.cnblogs.com/beast-king/p/5633752.html

diyinjiao1404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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><h...
复制链接

扫一扫