最近项目需求中有用到环形进度条,然后需要读数的效果,在网上找了下相关的代码,写出来以后整理了下
话不多说直接上代码
最终效果如下图
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery打开网页后数字动态跳转到指定数字大小代码</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="counter col_fourth">
<h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2>
</div>
</div>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
css
body {
font-family: Arial;
padding: 25px;
background-color: #f5f5f5;
color: #808080;
text-align: center;
}
.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; }
.count-text a{
text-decoration: none;
color: green;
}
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
js (核心效果代码)
$.fn.countTo = function(a) {
a = a || {};
return $(this).each(function() {
var c = $.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")
},
a);
var h = Math.ceil(c.speed / c.refreshInterval),
i = (c.to - c.from) / h;
var j = this,
f = $(this),
e = 0,
g = c.from,
d = f.data("countTo") || {};
f.data("countTo", d);
if (d.interval) {
clearInterval(d.interval)
}
d.interval = setInterval(k, c.refreshInterval);
b(g);
function k() {
g += i;
e++;
b(g);
if (typeof(c.onUpdate) == "function") {
c.onUpdate.call(j, g)
}
if (e >= h) {
f.removeData("countTo");
clearInterval(d.interval);
g = c.to;
if (typeof(c.onComplete) == "function") {
c.onComplete.call(j, g)
}
}
}
function b(m) {
var l = c.formatter.call(j, m, c);
f.html(l)
}
})
};
$.fn.countTo.defaults = {
from: 0,
to: 0,
speed: 1000,
refreshInterval: 100,
decimals: 0,
formatter: formatter,
onUpdate: null,
onComplete: null
};
function formatter(b, a) {
return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
formatter: function(b, a) {
return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
}
});
$(".timer").each(count);
function count(a) {
var b = $(this);
a = $.extend({},
a || {},
b.data("countToOptions") || {});
b.countTo(a)
};
原文地址可以下载demo 压缩包
原文地址: http://www.jb51.net/article/113034.htm