jQuery动态数字翻滚计数到指定数字的文字特效

最新推荐文章于 2023-09-26 11:32:26 发布

努力学习的lr

最新推荐文章于 2023-09-26 11:32:26 发布

阅读量195

点赞数 1

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/weixin_44409748/article/details/130948094

版权

这个功能实现了页面到达可视区域，实现动态数字翻滚计数到指定数字的文字特效。

如果要修改数字，在标签里面把data-to="20"里面的数字修改掉就好啦！代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial;
            padding: 25px;
            background-color: #f5f5f5;
            color: #808080;
            text-align: center;
        }

        /*-=-=-=-=-=-=-=-=-=-=-=- */
        /* Column Grids */
        /*-=-=-=-=-=-=-=-=-=-=-=- */

        .col_half {
            width: 49%;
        }

        .col_third {
            width: 32%;
        }

        .col_fourth {
            width: 23.5%;
        }

        .col_fifth {
            width: 18.4%;
        }

        .col_sixth {
            width: 15%;
        }

        .col_three_fourth {
            width: 74.5%;
        }

        .col_twothird {
            width: 66%;
        }

        .col_half,
        .col_third,
        .col_twothird,
        .col_fourth,
        .col_three_fourth,
        .col_fifth {
            margin-right: 2%;
            margin-bottom: 20px;
        }

        .end {
            margin-right: 0 !important;
        }

        /* Column Grids End */

        .wrapper {
            width: 980px;
            margin: 30px auto;
            position: relative;
            display: flex;
            justify-content: space-around;
        }

        .counter {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
        }

        .count-title {
            font-size: 40px;
            font-weight: normal;
            margin-top: 10px;
            margin-bottom: 0;
            text-align: center;
        }

        .count-text {
            font-size: 13px;
            font-weight: normal;
            margin-top: 10px;
            margin-bottom: 0;
            text-align: center;
        }

       
    </style>
    <script>
        (function ($) {
            $.fn.countTo = function (options) {
                options = options || {};

                return $(this).each(function () {
                    // set options for current element
                    var settings = $.extend({}, $.fn.countTo.defaults, {
                        from: $(this).data('from'),
                        to: $(this).data('to'),
                        speed: $(this).data('speed'),
                        refreshInterval: $(this).data('refresh-interval'),
                        decimals: $(this).data('decimals')
                    }, options);

                    // how many times to update the value, and how much to increment the value on each update
                    var loops = Math.ceil(settings.speed / settings.refreshInterval),
                        increment = (settings.to - settings.from) / loops;

                    // references & variables that will change with each update
                    var self = this,
                        $self = $(this),
                        loopCount = 0,
                        value = settings.from,
                        data = $self.data('countTo') || {};

                    $self.data('countTo', data);

                    // if an existing interval can be found, clear it first
                    if (data.interval) {
                        clearInterval(data.interval);
                    }
                    data.interval = setInterval(updateTimer, settings.refreshInterval);

                    // initialize the element with the starting value
                    render(value);

                    function updateTimer() {
                        value += increment;
                        loopCount++;

                        render(value);

                        if (typeof (settings.onUpdate) == 'function') {
                            settings.onUpdate.call(self, value);
                        }

                        if (loopCount >= loops) {
                            // remove the interval
                            $self.removeData('countTo');
                            clearInterval(data.interval);
                            value = settings.to;

                            if (typeof (settings.onComplete) == 'function') {
                                settings.onComplete.call(self, value);
                            }
                        }
                    }

                    function render(value) {
                        var formattedValue = settings.formatter.call(self, value, settings);
                        $self.html(formattedValue);
                    }
                });
            };

            $.fn.countTo.defaults = {
                from: 0, // the number the element should start at
                to: 0, // the number the element should end at
                speed: 1000, // how long it should take to count between the target numbers
                refreshInterval: 100, // how often the element should be updated
                decimals: 0, // the number of decimal places to show
                formatter: formatter, // handler for formatting the value before rendering
                onUpdate: null, // callback method for every time the element is updated
                onComplete: null // callback method for when the element finishes updating
            };

            function formatter(value, settings) {
                return value.toFixed(settings.decimals);
            }
        }(jQuery));

      

        $(window).scroll(function () {
            // console.log('scoll')
            //卷进去
            let wt = $(document).scrollTop();
            console.log('scoll',wt)
            
            //元素距离顶部
            let at = $('.wrapper').offset().top;
            console.log('at',at)
            if ((at - wt) < 800) {
                //移除滚动
                $(window).unbind('scroll');
                $('.timer').each(count);
            }

            // custom formatting example
            $('.count-number').data('countToOptions', {
                formatter: function (value, options) {
                    return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
                }
            });
            console.log('scoll')

            // start all the timers
            $('.timer').each(count);

            function count(options) {
                var $this = $(this);
                options = $.extend({}, options || {}, $this.data('countToOptions') || {});
                $this.countTo(options);
            }


        });
    </script>
</head>

<br>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>JQUERY NUMBER ANIMATION</h1>

    <h3>jQuery counter to count up to a target number</h3>

    <div class="wrapper">
        <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="20" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="175400" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth">
            <h2 class="timer count-title count-number" data-to="1900" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth end">
            <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>
    </div>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>
    <h1>.....</h1>

</body>

</html>