fullPage——基于jQuery全屏滚动

- 日理万妓 2022-05-30 23:43 270阅读 0赞

看到977在群里发的苹果的一个[全屏滚动网页][Link 1]，看起来非常高端，大气，上档次。拖了好几天了，今天下午试了一下。

--------------------

## 介绍： ##

现在很多网页，看起来简洁大方很上档次，我们发现这些大多都是用几幅很大的图片或色块做背景，再添加一些简单的内容完成。

**fullPage.js**是一个基于jQuery的插件，他能够方便，轻松的制作出全屏网站。

## 功能： ##

*  支持鼠标滚动
 *  支持前后进退和键盘控制
 *  多个回调函数
 *  支持手机，平板触摸事件
 *  支持CSS3动画
 *  支持窗口缩放
 *  窗口缩放时自动调整
 *  可自行设置滚动宽度，背景颜色，滚动速度，循环选项等等。
 *  \-

## 兼容性： ##

jQuery：1.7+

浏览器：IE8+，谷歌，火狐等基本都支持

## 使用方法： ##

**1. 引入文件**

通过CDN引入fullPage.js：

**2.HTML**

每个section代表一个屏，默认显示第一屏，如果要指定显示屏幕，可以给其`class="active".`

也可以给section(每一屏)中添加水平方向上滚动切换的slide，如下：

<div id="dowebok">
        <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>

**3.JavaScript**

$(function(){ 
        $('#dowebok').fullpage();
        //调用此方法进行初始化
    });

这样基本实现了，[GitHub地址][GitHub]

当然还有一些比如设置背景颜色的选项，定义锚链接之类的选项，向上滚动，向下滚动的方法，回调函数等等，都在我代码实现中有用。大家可以参考。或者也可以[参考官网][Link 2]

[参考文章][Link 3]

[Link 1]: https://www.apple.com/cn/iphone/
[GitHub]: https://github.com/CallmePapa/JQuery-demos/tree/master/fullPage
[Link 2]: http://www.dowebok.com/77.html
[Link 3]: https://www.jianshu.com/p/aa921839dd38