jquery xRoll.js element元素滚动到显示位置侦测js插件-BFW插件库

jquery xRoll.js element元素滚动到显示位置侦测js插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        function numAnimate(el, init, max) {
            var timer = setInterval(function() {
                if (init == max) return;
                init++;
                el.html(init);
            }, 10)
        }
        bready(function() {
            use(["xRoll"], function() {


                xRoll($('h1').eq(0), function() {
                    alert('第一段文字可以执行操作了')
                });

                xRoll($('h1').eq(1), function() {
                    alert('第二段文字可以执行操作了')
                });

                xRoll($('.data'), function() {
                    numAnimate($('.data p').eq(0), 0, $.trim($('.data p').eq(0).html()));
                    numAnimate($('.data p').eq(1), 0, $.trim($('.data p').eq(1).html()));
                    numAnimate($('.data p').eq(2), 0, $.trim($('.data p').eq(2).html()));
                });

            });
        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: bisque;
            font-family: "微软雅黑";
        }

        h1,
        h3 {
            font-weight: normal;
            text-align: center;
        }

        .data {
            width: 100%;
            text-align: center;
            margin-top: 800px;
            padding: 1rem
        }

        .data p {
            width: 32%;
            display: inline-block;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <h1 style="margin-top: 800px">我是第一段文字</h1>
    <h1 style="margin-top: 800px">我是第二段文字</h1>
    <div class="data">
        <p class="num">
            500
        </p>
        <p class="num">
            450
        </p>
        <p class="num">
            600
        </p>
    </div>
</body>
</html>