jQuery全屏滚动插件fullPage.js

今天做了一个专题，需要用到全屏滚动效果，在百度找了一jquery插件，fullPage.js,只有一天的时间就要完成，只是简单的了解下就开始做专题了。

demo地址：http://alanjs.comeze.com/2014No1/index.html

插件API：http://www.dowebok.com/77.html

下载地址：https://github.com/alvarotrigo/fullPage.js

1.引入jquery.fullPage.min.js文件
2.引入jquery.fullPage.css文件
3.引入jquery.easing.min.js文件

JS调用

$(function(){
    $('#dowebok').fullpage({
    verticalCentered: false,      //内容居中
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],    //锚
        navigation: true,       //是否有导航
        navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件']

    //如果IE版本小于10就在body添加ltie10,然后样式中会用.ltie .class平缓退化
    if($.browser.msie && $.browser.version < 10){
             $('body').addClass('ltie10');
        }
    });
});

 

HTML

<div id="dowebok">
    <div class="section section1">
    <div class="bg">
        <div class="page2_bg1"></div>
        <div class="page2_bg2"></div>
        <div class="page2_bg3"></div>
    </div>
    </div>
    <div class="section section2">第二屏</div>
    <div class="section section3">
        <div class="slide slide1">第三屏的第一屏</div>
        <div class="slide slide2">第三屏的第二屏</div>
        <div class="slide slide3">第三屏的第三屏</div>
        <div class="slide slide4">第三屏的第四屏</div>
    </div>
    <div class="section section4">第四屏</div>
</div>

 

CSS

如果有调用导航小图标，会有默认样式，如想要改变样式，则参考如下

<style>
#container{min-width:1003px;}
#fullPage-nav{_display:none;font-size:12px;}
#fullPage-nav li{width:30px;height:30px;}
#fullPage-nav li a { float: right; width: 26px; height: 26px; color: #8F9DA4; text-decoration: none; text- 
align: right; background: url(images/icon.png) 0 -155px no-repeat;}
#fullPage-nav li .active { background-position: 0 -192px; }
#fullPage-nav span { display: none;}
.fullPage-tooltip { float: left; top: 0; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 26px;}
.section .bg img{width:100%;height:100%;display:block;}
</style>

 回调函数

afterLoad: function (anchorLink, index) {
　　　//index为页数，值为number　　　
}
onLeave: function (index, nextIndex, direction){
        //direction为方向，取值为“down",”up"
}