学习笔记： js插件 —— fullPage.js （页面全屏滚动）

fullPage.js　　（页面全屏滚动）

必须依赖 jquery-ui.min.js， 233K

14760个星。以后有时间再看。 API挺全

https://github.com/alvarotrigo/fullPage.js 　　官网　　　　英国，Álvaro开发的

http://www.uedsc.com/fullpage.html　　API　　这页有广告，不过有中文说明，凑合看看吧。

http://www.dowebok.com/77.html

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link href="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.min.js"></script>
<!-- 
<link href="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.js"></script>
 -->
<style>
.section {text-align:center;font:50px "Microsoft Yahei";color:#fff;}
</style>
<script>
$(function(){
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        anchors: ['firstPage', 'secondPage', '3rdPage'],
        //menu: '#menu',
        loopTop: true
        //loopBottom: true
    });
});
</script>
<div id="fullpage">
    <div class="section " id="section0">
        <h1>fullPage.js</h1>
        <p>Looping Top and Bottom Enabled</p>
    </div>
    <div class="section" id="section1">
        <h1>Looping!</h1>
        <p>Go to the first section and scroll up or to the last one and scroll down to see how it works.</p>
    </div>
    <div class="section" id="section2">
        <h1>Scroll Down</h1>
        <p>And it will loop to the first section</p>
    </div>
</div>

...

学习笔记： js插件 —— fullPage.js （页面全屏滚动）

相关推荐