网页上如果有数字需要经常变动,又想让它比较明显,肯定是加个动画比较显眼,利用jquery的animate可以很容易的实现,不需要css3,因此可以兼容低版本的ie浏览器。先看效果图:

wKioL1T_1-qSIvciAAB-parmLhM069.gif


代码比较简单,没有整理成插件形式,暂时全堆在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>



代码与资源放在附件里了。