jquery.fullPage.js jquery全屏鼠标滚动加载插件-BFW插件库

jquery.fullPage.js jquery全屏鼠标滚动加载插件

依赖jquery及jquery ui库

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.fullPage", "jquery.fullPage"], function() {
                $.fn.fullpage({

                    slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],

                    anchors: ['page1', 'page2', 'page3', 'page4'],

                    navigation: true

                });


            });
        });
    </script>
    <style>

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

    </style>
</head>
<body>
    <div class="section">
        <h3>第一屏</h3>
        <p>
            fullPage.js — 项目导航演示
        </p>
    </div>
    <div class="section">
        <div class="slide">
            <h3>第二屏的第一屏</h3>
        </div>
        <div class="slide">
            <h3>第二屏的第二屏</h3>
        </div>
        <div class="slide">
            <h3>第二屏的第三屏</h3>
        </div>
    </div>
    <div class="section">
        <h3>第三屏</h3>
        <p>
            圆圈还可以设置位置，颜色，加上 tip，点击可以控制
        </p>
    </div>
    <div class="section">
        <h3>第四屏</h3>
        <p>
            这是最后一屏
        </p>
    </div>
</body>
</html>

jquery.fullPage.js jquery全屏鼠标滚动加载插件

网友评论0

html2canvas.js

onepage-scroll.js

jquery.ripples-min.js

jquery.parallax.js

jquery.fullPage.js

opencv.js

Particleground.js

particles.js