jquery动态数字翻滚计数到指定数字的文字特效代码

来源：互联网发布：在职研究生知乎编辑：程序博客网时间：2024/05/19 05:39
动画效果：
具体代码：
<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>jquery动态数字翻滚计数到指定数字的文字特效代码</title>        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    </head>    <body>        <h2 class="timer" id="count-number" data-from='333' data-to="6666" data-speed="1000"></h2>        <h2 class="timer" id="count-number" data-from='8888' data-to="222" data-speed="1000"></h2>                  <script type="text/javascript">            $.fn.countTo = function(options) {                options = options || {};                return $(this).each(function() {                    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);                                        var loops = Math.ceil(settings.speed / settings.refreshInterval),                        increment = (settings.to - settings.from) / loops;                                          var self = this,                        $self = $(this),                        loopCount = 0,                        value = settings.from,                        data = $self.data('countTo') || {};                    $self.data('countTo', data);                    if(data.interval) {                        clearInterval(data.interval);                    }                    data.interval = setInterval(updateTimer, settings.refreshInterval);                    render(value);                    function updateTimer() {                        value += increment;                        loopCount++;                        render(value);                        if(typeof(settings.onUpdate) == 'function') {                            settings.onUpdate.call(self, value);                        }                        if(loopCount >= loops) {                            $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);            }            $('#count-number').data('countToOptions', {                formatter: function(value, options) {                    return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');                }            });            $('.timer').each(count);            function count(options) {                var $this = $(this);                options = $.extend({}, options || {}, $this.data('countToOptions') || {});                $this.countTo(options);            }        </script>    </body></html>
阅读全文
0 0