jQuery全屏滚动插件fullPage使用

2018-08-14 10:04:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1. 引入jquery.js和jquery.fullPage.min.js

<script src="jquery.min.js"></script>
<script src="chajian/jquery.fullPage.min.js"></script>

2. 书写html

<div id="dowebok">
    <div class="section section1">
        <h3>第一屏</h3>
        <p>fullPage.js — 回调函数演示</p>
    </div>
    <div class="section section2">
        <h3>第二屏</h3>
        <p>滚动到第二屏后的回调函数执行的效果</p>
    </div>
    <div class="section section3">
        <h3>第三屏</h3>
        <p>滚动到第三屏后的回调函数执行的效果</p>
    </div>
    <div class="section section4">
        <h3>第四屏</h3>
        <p>滚动到第四屏后的回调函数执行的效果</p>
    </div>
</div>

 

3. 编写样式

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

4. 书写js

$(function(){
       $('#dowebok').fullpage({
       sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
    })
})

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js 编辑数组

下一篇:Canvas屏保动画