http://www.aliyue.net/1301.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js数字递增特效</title> <style type="text/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; } </style> </head> <body> <div class="wrapper"> <div class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">js数字递增特效</p> </div> <div class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="17870" data-speed="1500"></h2> <p class="count-text ">js数字递增特效</p> </div> <div class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="847" data-speed="1500"></h2> <p class="count-text ">js数字递增特效</p> </div> <div class="counter col_fourth end"> <h2 class="timer count-title" id="count-number" data-to="157" data-speed="1500"></h2> <p class="count-text ">js数字递增特效</p> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $.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) }; </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » js数字递增特效 喜欢 (9)or分享 (0)
