网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jquery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。先看效果图：
代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html lang=
"zh-cn"
>
<head>
<meta charset=
"utf-8"
>
<title>演示</title>
<script src=
"jquery-1.7.1.min.js"
></script>
<style>
.digits{
display:inline-block;
height:30px;
margin-right:50px;
}
.digits i{
background:url(numbers.png) no-repeat;
display:inline-block;
float:left;
height:30px;
width:18px;
}
.digits b{
background:url(numbers.png) no-repeat 0 -398px;
display:inline-block;
float:left;
height:30px;
width:10px;
}
</style>
<script>
function
setNumber(dom, number){
var
n = String(number),len = n.length;
//如果新的数字短于当前的，要移除多余的i
if
(dom.find(
"i"
).length > len){
dom.find(
"i:gt("
+ (len - 1) +
")"
).remove();
}
//移除千分位分隔符
dom.find(
"b"
).remove();
//开始填充每一位
for
(
var
i=0;i<len;++i){
//位数不足要补
if
(dom.find(
"i"
).length < len){
dom.append(
"<i></i>"
);
}
var
obj = dom.find(
"i"
).eq(i);
var
y = -40 * parseInt(n.charAt(i), 10);
//加分隔符
if
(i < len - 1 && (len - i - 1) % 3 == 0)
$(
"<b></b>"
).insertAfter(obj);
//利用动画变换数字
obj.animate({ backgroundPositionY:y+
"px"
}, 350);
}
};
$(
function
(){
//测试，每秒更新随机数
window.setInterval(
function
(){
setNumber($(
"#a"
), Math.floor(Math.random() * 1000000));
setNumber($(
"#b"
), Math.floor(Math.random() * 1000000));
}, 1000);
});
</script>
</head>
<body>
<div id=
"a"
class=
"digits"
></div>
<div id=
"b"
class=
"digits"
></div>
</body>
</html>
|
代码与资源放在附件里了。
附件：http://down.51cto.com/data/2365488
本文转自 BoyTNT 51CTO博客，原文链接：http://blog.51cto.com/boytnt/1619315，如需转载请自行联系原作者
