jQuery动态实现数字递增或递减

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动态数字翻滚计数到指定数字的文字特效代码</title>
<!--<link rel='stylesheet prefetch' href='./static/css/font-awesome.min.css'>
<link rel="stylesheet" href="./static/css/style.css" media="screen" type="text/css" />-->
</head>
<body>
<div style="height: 1200px;width: 100%;">

</div>
<hr>
<h2 class="timer count-title top-jl" id="count-number" data-from="10000" data-to="1689" data-speed="3000"></h2>

<div style="height: 500px;width: 100%;">

</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/js/index.js"></script>
</body>
</html>

js代码

//获取指定元素到顶部的偏移距离
var aaaa = $('.top-jl');
alert(aaaa.offset().top);






// 不加滚动条监听
/*$.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;

        console.log(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,
    to: 0,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    formatter: formatter,
    onUpdate: null,
    onComplete: null
};
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);
}

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>400 && $(window).scrollTop()<600){

        }
});
});*/



//加滚动监听
$.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;

        console.log(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,
    to: 0,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    formatter: formatter,
    onUpdate: null,
    onComplete: null
};
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, ',');
    }
});



$(window).scroll(function() {
    if ($(window).scrollTop() > 1000 && $(window).scrollTop() < 1200) {
        $('.timer').each(count);

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

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

</script>

jQuery动态实现数字递增或递减

猜你喜欢