jQuery全屏滚动插件fullPage使用

最新推荐文章于 2023-08-01 01:02:57 发布

Min红

最新推荐文章于 2023-08-01 01:02:57 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/xiaoxiaoyoumeng/article/details/81067967

版权

本文详细介绍了如何使用jQuery全屏滚动插件fullPage，包括引入必要的JS文件，构建HTML结构，定制样式，以及编写JavaScript实现全屏滚动效果。

摘要由CSDN通过智能技术生成

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. 编写样式