jQuery计数器动画特效插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery计数器动画特效插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery计数器动画特效插件</title>
    <link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

    <h1>JQUERY NUMBER ANIMATION</h1>
    <h3>jQuery counter to count up to a target number</h3>

    <div class="wrapper">
        <div class="counter col_fourth">
            <i class="fa fa-code fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth">
            <i class="fa fa-coffee fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth">
            <i class="fa fa-lightbulb-o fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="847" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>

        <div class="counter col_fourth end">
            <i class="fa fa-bug fa-2x"></i>
            <h2 class="timer count-title" id="count-number" data-to="157" data-speed="1500"></h2>
            <p class="count-text ">SomeText GoesHere</p>
        </div>
    </div>
    <script src='js/jquery.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$.fn.countTo = function (options){
	options = options ||{
}
;
	return $(this).each(function (){
	// set options for current elementvar 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 updatevar loops = Math.ceil(settings.speed / settings.refreshInterval),increment = (settings.to - settings.from) / loops;
	// references & variables that will change with each updatevar 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 firstif (data.interval){
	clearInterval(data.interval);
}
data.interval = setInterval(updateTimer,settings.refreshInterval);
	// initialize the element with the starting valuerender(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 atto:0,// the number the element should end atspeed:1000,// how long it should take to count between the target numbersrefreshInterval:100,// how often the element should be updateddecimals:0,// the number of decimal places to showformatter:formatter,// handler for formatting the value before renderingonUpdate:null,// callback method for every time the element is updatedonComplete:null // callback method for when the element finishes updating}
;
	function formatter(value,settings){
	return value.toFixed(settings.decimals);
}
// custom formatting example $('#count-number').data('countToOptions',{
	formatter:function (value,options){
	return value.toFixed(options.decimals).replace(/\B(?=(?:\d{
	3}
)+(?!\d))/g,',');
}
}
);
	// start all the timers $('.timer').each(count);
	function count(options){
	var $this = $(this);
	options = $.extend({
}
,options ||{
}
,$this.data('countToOptions') ||{
}
);
	$this.countTo(options);
}

CSS代码(normalize.css):

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

CSS代码(style.css):

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{position:relative;display:inline;display:inline-block;float:left;margin-right:2%;margin-bottom:20px;}
.end{margin-right:0 !important;}
/* Column Grids End */
.wrapper{width:980px;margin:30px auto;position:relative;}
.counter{background-color:#ffffff;padding:20px 0;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;}
.fa-2x{margin:0 auto;float:none;display:table;color:#4ad1e5;}

附件:下载该文件资源,减少时间成本(增值服务)