fullpage使用

标签：

html:

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

css: 
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">


js:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(function(){
　　$(‘#fullpage‘).fullpage({
　　　　‘navigation‘: true,                 //显示右边的圆圈导航
　　　　‘navigationPosition‘: ‘right‘       //将导航放在右边
　　});
})
</script>


假设各个屏都有自己的动画，可以用callback函数，也可以用：
.page5 .title {z-index:4;width:80%; padding:0 10%; top:5%; left:0; text-align:center;transition:top 1s,opacity 1s;transition-delay: 0.5s;opacity:0;}
.page5.active .title {top:10%;opacity:1;}
因为fullpage。js有在当前屏加一个active类。


具体用法可以参考：http://www.jq22.com/jquery-info1124
https://github.com/alvarotrigo/fullPage.js

fullpage使用

标签：

原文地址：http://www.cnblogs.com/fifis/p/4796911.html