数字转换成科学计数模式，并实现翻页效果。

支持IE9及以上浏览器

查看demo

css代码：

.jFlip-layout{height:51px;}
.jFlip-layout>div{display:inline-block;}
.flip-num{position:relative;display:inline-block;padding:4px 5px 2px;width:30px;height:42px;margin:0 1px;text-align:center;font-size:30px;font-weight:bold;line-height:42px;color:#606060;box-sizing:border-box;-webkit-perspective:50px;-moz-perspective:50px;-o-perspective:50px;-ms-perspective:50px;perspective:50px;}
flip-num:after{content:'';width:27px;height:1px;background-color:#212121;position:absolute;z-index:3;top:50%;left:1px;}
.flip-num>div{position:absolute;left:0;width:100%;height:50%; background:url('images/num_bg1.png') 0 0 no-repeat; overflow:hidden;box-sizing:border-box;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;}
.flip-num>.f-t{top:0;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;}
.flip-num>.f-b{bottom:0;-ms-transform-origin:50% 0;-webkit-transform-origin:50% 0;transform-origin:50% 0;background-position:0 100%;}
.flip-num>div>span{position:absolute;display:block;width:100%;height:200%;color:#f7e268;background:-webkit-linear-gradient(top,#F7E268 20%,#FFF 50%,#F7E268 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.flip-num>.f-t>span{top:0;}
.flip-num>.f-b>span{bottom:0;}
.flip-num>.f-i.f-t{z-index:2;}
.flip-num>.f-i.f-b{z-index:1;}
.flip-num>.f-j.f-t{z-index:1;}
.flip-num>.f-j.f-b{z-index:2;-ms-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);}
.flip-num.ing>.f-i.f-t{-ms-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);}
.flip-num.ing>.f-j.f-b{-ms-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}

html代码：

<div class="jFlip-layout"></div>
<div class="jFlip-layout"></div>

js代码：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
    $.fn.animateRotate = function (e, h, g, i, c) {
        var d = $.speed(g, i, c);
        var f = $.step;
        return blog_post.each(function (j, k) {
            d.step = function (l) {
                $.style(k, "transform", "rotateX(" + l + "deg)");
                if (f) {
                    return f.apply(blog_post, arguments)
                }
            };
            $({
                deg: e
            }).animate({
                deg: h
            }, d)
        })
    };

    $.fn.flipNum=function(Num){
        var jpFlip = {
            txt: function (m) {
                if (m.length === 0) {
                    return
                }
                var c = /msies[1-9][^d]/i.test(navigator.userAgent),
                    g = blog_post,
                    h = [],
                    l = [],
                    f, d, k, e = '<div class="flip-num flip-unit" data-n="0"><div class="f-i f-t"><span>0</span></div><div class="f-j f-t"><span>1</span></div><div class="f-i f-b"><span>0</span></div><div class="f-j f-b"><span>1</span></div></div>';
                if (c || typeof bbpage === "object") {
                    e = '<div class="flip-num flip-unit" data-n="0"><div class="f-i f-t"><span>0</span></div><div class="f-j f-t"><span>1</span></div><div class="f-i f-b"><span>0</span></div><div class="f-j f-b" style="display:none;"><span>1</span></div></div>'
                }
                m.each(function () {
                    if ($(blog_post).text() === "loading...") {
                        $(blog_post).text("0.00")
                    }
                    $(blog_post).hide();
                    h = [];
                    h = $(blog_post).text().split("");
                    if ($(blog_post).data("fComplete") !== "Y") {
                        $(blog_post).data("fComplete", "Y");
                        l = [];
                        for (f = 0; f < h.length; f++) {
                            if (g.isInteger(parseInt(h[f]))) {
                                l.push(e)
                            } else {
                                l.push('<div class="flip-unit">' + h[f] + "</div>")
                            }
                        }
                        $(blog_post).next(".jFlip-layout").html(l.join(""))
                    }
                    k = $(blog_post).next(".jFlip-layout").find(".flip-unit");
                    if (k.length < h.length) {
                        for (d = 0; d < h.length - k.length; d++) {
                            $(blog_post).next(".jFlip-layout").prepend(e)
                        }
                    } else {
                        if (k.length > h.length) {
                            for (d = 0; d < k.length - h.length; d++) {
                                k.eq(d).remove()
                            }
                        }
                    }
                    k = $(blog_post).next(".jFlip-layout").find(".flip-unit");
                    for (f = 0; f < h.length; f++) {
                        if (g.isInteger(parseInt(h[f]))) {
                            if (!k.eq(f).hasClass("flip-num")) {
                                k.eq(f).addClass("flip-num").html($(e).html())
                            }
                            g.flipDomNum(k.eq(f), k.eq(f).attr("data-n"), h[f]);
                            k.eq(f).attr("data-n", h[f])
                        } else {
                            k.eq(f).removeClass("flip-num").html(h[f])
                        }
                    }
                })
            },
            flipDomNum: function (g, f, h) {
                if (f === h) {
                    return
                }
                var d = blog_post,
                    c = parseInt(f),
                    e = parseInt(h);
                if (c !== parseInt(c, 10)) {
                    c = 0
                }
                if (f > h) {
                    e += 10
                }
                d.flipDomTimer(g, c, e)
            },
            flipDomTimer: function (f, d, e) {
                var c = blog_post,
                    g;
                d++;
                g = (d >= 10) ? (d % 10) : d;
                f.find(".f-i.f-t").animateRotate(0, -90, 150, "linear", function () {
                    f.find(".f-j.f-b").animateRotate(90, 0, 150, "linear", function () {
                        f.find(".f-i span").text(g);
                        f.find(".f-j span").text((g + 1) >= 10 ? 0 : g + 1);
                        f.find(".f-i.f-t").css({
                            transform: "rotateX(0deg)"
                        });
                        f.find(".f-j.f-b").css({
                            transform: "rotateX(90deg)"
                        });
                        if (d < e) {
                            c.flipDomTimer(f, d, e)
                        }
                    })
                })
            },
            isInteger: function (c) {
                return Math.round(c) === c
            },
            formatMoney:function (strNum) {
                if (strNum.length <= 3) {
                    return strNum;
                }
                if (!/^(+|-)?(d+)(.d+)?$/.test(strNum)) {
                return strNum;
                }
                var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
                var re = new RegExp();
                re.compile("(\d)(\d{3})(,|$)");
                while (re.test(b)) {
                b = b.replace(re, "$1,$2$3");
                }
                return a + "" + b + "" + c;
            }
        }
    var $domNum=$("<span style='display:none'></span>");
        $(blog_post).before($domNum);
        $domNum.text(jpFlip.formatMoney(Num));
        jpFlip.txt($domNum);
    }
}(jQuery));

$(".jFlip-layout").each(function(){
   $(blog_post).flipNum(8377940.266);
});