fullpage.js插件使用——菜单绑定

来源：互联网发布：章鱼搜索网络错误编辑：程序博客网时间：2024/05/17 21:15

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>菜单绑定</title>

        <style type="text/css">            *{padding: 0;margin: 0;}            li{list-style: none;}            #menu{height: 50px;position: fixed;left: 0;top: 0;z-index: 20;}            #menu li{float: left;width: 100px;height: 50px;line-height: 50px;text-align: center;background: #000;}            #menu li a{color: #fff;text-decoration: none;}            #menu .active a{color: #31B0D5}   <!--fullpage插件会自动给menu添加active样式-->        </style>``      <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>     <!--fullpage依赖jQuery文件-->        <script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>      <!--fullpage文件-->ead>    <body>

    <ul id="menu">        <li data-menuanchor="page1" class="active"><a href="#page1">第1屏</a></li>        <li data-menuanchor="page2"><a href="#page2">第2屏</a></li>        <li data-menuanchor="page3"><a href="#page3">第3屏</a></li>    </ul>    <div id="content">        <div class="section">            第一屏的内容        </div>        <div class="section">            第二屏内容        </div>        <div class="section">            第三屏内容        </div>    </div>

<script>            $(function(){                $("#content").fullpage({                    sectionsColor:["#caf9a3","#90ac32","#ac932a"],                    anchors:["page1","page2","page3"],   //注意不带#                    menu:"#menu"    //绑定菜单，data-menuanchor,才能使用.active                })            })        </script>

</body>

“`

阅读全文

0 0