jQuery实时数字统计，动画效果进度条的代码

　　jQuery实时数字统计，动画效果进度条的代码，通过下边的示例演示您可以看到jQuery已经将网页特效演绎的淋漓尽致，不知道的朋友肯定是以为用了flash。实在是给人眼前放光的感觉。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火网特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /><br /> <meta content="一个使用<b>Java</b>Script进行统计并生成动画的进度条代码，根据数据的大小，自动生成对应比例的进度条，带动画效果，使用了jQuery插件，调用了外部的JS文件。" name="description" /><br /> <title>jQuery数字统计并生成进度条动画的代码——烈火网</title><br /> <style type="text/css"><br /> b{display:block;float:left;height:20px;width:40px;}<br /> div{height:20px;}<br /> div.a_red{background:red;float:left;}<br /> div.b_green{background:green;float:left;}<br /> div.c_orange{background:orange;float:left;}<br /> </style><br /> </head><br /> <body><br /> <div class="a"><br /> <b>90</b><div class="a_red"></div><br /> </div><br /> <div class="b"><br /> <b>70</b><div class="b_green"></div><br /> </div><br /> <div class="c"><br /> <b>50</b><div class="c_orange"></div><br /> </div><br /> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script><br /> <script type="text/javascript"><br /> window.onload=function(){<br /> var a_num=$("div.a b").text()*1;<br /> var b_num=$("div.b b").text()*1;<br /> var c_num=$("div.c b").text()*1;<br /> var a=1,b=1,c=1;<br /> var change_a=function(){<br /> $("div.a b").text(a);<br /> if(a<a_num){<br /> a++;<br /> }<br /> }<br /> var change_b=function(){<br /> $("div.b b").text(b);<br /> if(b<b_num){<br /> b++;<br /> }<br /> }<br /> var change_c=function(){<br /> $("div.c b").text(c);<br /> if(c<c_num){<br /> c++;<br /> }<br /> }<br /> var crear_a=setInterval(change_a,(3000/a_num));<br /> var crear_b=setInterval(change_b,(3000/b_num));<br /> var crear_c=setInterval(change_c,(3000/c_num));<br /> $("div.a_red").animate({width:(a_num*2)+"px"},3000);<br /> $("div.b_green").animate({width:(b_num*2)+"px"},3000);<br /> $("div.c_orange").animate({width:(c_num*2)+"px"},3000);<br /> }<br /> </script><br /> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center><br /> <br /> <div style="display:none;"><br /> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script><br /> </div><br /> </body><br /> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

jQuery实时数字统计，动画效果进度条的代码

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

jQuery实时数字统计，动画效果进度条的代码

由 dawei

相关文章

SQLite 实现if not exist 类似功能的操作

PostgreSQL将数据加载到buffer cache中操作方法

在PostgreSQL中使用ltree处理层次结构数据的方法

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀