fullPage全屏滚动的实现

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。

用法:

1、引入jquery

2、引入fullPage

3、每个section代表一屏

4、js启动:

$(function(){
    $('#dowebok').fullpage();
});

完整实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.2/jquery.fullPage.js"></script>
</head>

<body>
    <div id="fullpage">
        <div class="section">Some section one</div>
        <div class="section active">Some section two</div>
        <div class="section">Some section three</div>
        <div class="section">Some section four</div>
    </div>
    <script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
        });
    });
    </script>
</body>

</html>

详情:

https://github.com/alvarotrigo/fullPage.js

http://www.dowebok.com/77.html

原文地址:https://www.cnblogs.com/tinyphp/p/4848196.html