设为首页收藏本站
切换到宽版

PHPIN.NET

 找回密码
 立即注册
PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › 利用jQuery和CSS实现环形百分比进度条
返回列表 发新帖
查看: 13280|回复: 0

[jQuery/Js/AJAX] 利用jQuery和CSS实现环形百分比进度条

[复制链接]
admin

469

主题

31

回帖

5623

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5623
发表于 2014-4-29 17:26:43 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
利用jQuery和CSS实现环形进度条


方法一、CSS3实现：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. body{font-family:"微软雅黑";}
  7. .circle{width:200px;height:200px;position:absolute;border-radius:50%;background:#0cc;}
  8. .pie_left, .pie_right{width:200px;height:200px;position:absolute;top:0;left:0;}
  9. .left, .right{width:200px;height:200px;background:#00aacc;border-radius:50%;position:absolute;top:0;left:0;}
  10. .pie_right, .right{clip:rect(0,auto,auto,100px);}
  11. .pie_left, .left{clip:rect(0,100px,auto,0);}
  12. .mask{width:150px;height:150px;border-radius:50%;left:25px;top:25px;background:#FFF;position:absolute;text-align:center;line-height:150px;font-size:20px;font-weight:bold;color:#00aacc;}
  13. </style>
  14. </head>
  15. <body>
  16. <div class="circle" style="left:0">
  17. <div class="pie_left"><div class="left"></div></div>
  18. <div class="pie_right"><div class="right"></div></div>
  19. <div class="mask"><span>0</span>%</div>
  20. </div>
  21. <div class="circle" style="left:220px">
  22. <div class="pie_left"><div class="left"></div></div>
  23. <div class="pie_right"><div class="right"></div></div>
  24. <div class="mask"><span>15</span>%</div>
  25. </div>
  26. <div class="circle" style="left:440px">
  27. <div class="pie_left"><div class="left"></div></div>
  28. <div class="pie_right"><div class="right"></div></div>
  29. <div class="mask"><span>30</span>%</div>
  30. </div>
  31. <div class="circle" style="left:660px">
  32. <div class="pie_left"><div class="left"></div></div>
  33. <div class="pie_right"><div class="right"></div></div>
  34. <div class="mask"><span>60</span>%</div>
  35. </div>
  36. <div class="circle" style="left:880px">
  37. <div class="pie_left"><div class="left"></div></div>
  38. <div class="pie_right"><div class="right"></div></div>
  39. <div class="mask"><span>90</span>%</div>
  40. </div>
  41. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  42. <script>
  43. $(function(){
  44. $('.circle').each(function(index, el){
  45. var num = $(this).find('span').text() * 3.6;
  46. if (num<=180){
  47. $(this).find('.right').css('transform', "rotate(" + num + "deg)");
  48. } else{
  49. $(this).find('.right').css('transform', "rotate(180deg)");
  50. $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
  51. };
  52. });
  53. });
  54. </script>
  55. </body>
  56. </html>
复制代码

效果截图：
演示截图2.jpg

原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。
我们需要考虑的是，圆环的转动幅度大小，是由圆环里面数字的百分比决定的，从0%-100%，那么圆弧被分成了每份3.6°；而在180°，也就是50%进度之前，左侧的半弧是不动的，当超过50%，左边的半弧才会有转动显示。


方法二、JQ+CSS+图片实现：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. .progressbar{text-align:center;line-height:44px;width:44px;display:block;background:url(progressbar.png);height:44px;font-size:14px;margin-left:20px;float:left;font-family:"微软雅黑";font-size:11px;}
  7. .progressbar-1{background-position:0px 0px;}
  8. .progressbar-2{background-position:-54px 0px;}
  9. .progressbar-3{background-position:-108px 0px;}
  10. .progressbar-4{background-position:-162px 0px;}
  11. .progressbar-5{background-position:-216px 0px;}
  12. .progressbar-6{background-position:-270px 0px;}
  13. .progressbar-7{background-position:-324px 0px;}
  14. .progressbar-8{background-position:-378px 0px;}
  15. .progressbar-9{background-position:-432px 0px;}
  16. .progressbar-10{background-position:-486px 0px;}
  17. .progressbar-11{background-position:-540px 0px;}
  18. .progressbar-12{background-position:-594px 0px;}
  19. .progressbar-13{background-position:-648px 0px;}
  20. .progressbar-14{background-position:-702px 0px;}
  21. .progressbar-15{background-position:-756px 0px;}
  22. .progressbar-16{background-position:-810px 0px;}
  23. .progressbar-17{background-position:-864px 0px;}
  24. .progressbar-18{background-position:-918px 0px;}
  25. .progressbar-19{background-position:-972px 0px;}
  26. .progressbar-20{background-position:-1026px 0px;}
  27. .progressbar-21{background-position:-1080px 0px;}
  28. .progressbar-22{background-position:-1134px 0px;}
  29. .progressbar-23{background-position:-1188px 0px;}
  30. .progressbar-24{background-position:-1242px 0px;}
  31. .progressbar-25{background-position:-1296px 0px;}
  32. .progressbar-26{background-position:-1350px 0px;}
  33. .progressbar-27{background-position:-1404px 0px;}
  34. .progressbar-28{background-position:-1458px 0px;}
  35. .progressbar-29{background-position:-1512px 0px;}
  36. .progressbar-30{background-position:-1566px 0px;}
  37. .progressbar-31{background-position:-1620px 0px;}
  38. .progressbar-32{background-position:-1674px 0px;}
  39. .progressbar-33{background-position:-1728px 0px;}
  40. .progressbar-34{background-position:-1782px 0px;}
  41. .progressbar-35{background-position:-1836px 0px;}
  42. .progressbar-36{background-position:-1890px 0px;}
  43. .progressbar-37{background-position:-1944px 0px;}
  44. .progressbar-38{background-position:-1998px 0px;}
  45. .progressbar-39{background-position:-2052px 0px;}
  46. .progressbar-40{background-position:-2106px 0px;}
  47. .progressbar-41{background-position:-2160px 0px;}
  48. .progressbar-42{background-position:-2214px 0px;}
  49. .progressbar-43{background-position:-2268px 0px;}
  50. .progressbar-44{background-position:-2322px 0px;}
  51. .progressbar-45{background-position:-2376px 0px;}
  52. .progressbar-46{background-position:-2430px 0px;}
  53. .progressbar-47{background-position:-2484px 0px;}
  54. .progressbar-48{background-position:-2538px 0px;}
  55. .progressbar-49{background-position:-2592px 0px;}
  56. .progressbar-50{background-position:-2700px 0px;}
  57. .progressbar-51{background-position:-2754px 0px;}
  58. .progressbar-52{background-position:-2808px 0px;}
  59. .progressbar-53{background-position:-2862px 0px;}
  60. .progressbar-54{background-position:-2916px 0px;}
  61. .progressbar-55{background-position:-2970px 0px;}
  62. .progressbar-56{background-position:-3024px 0px;}
  63. .progressbar-57{background-position:-3078px 0px;}
  64. .progressbar-58{background-position:-3132px 0px;}
  65. .progressbar-59{background-position:-3186px 0px;}
  66. .progressbar-60{background-position:-3240px 0px;}
  67. .progressbar-61{background-position:-3294px 0px;}
  68. .progressbar-62{background-position:-3348px 0px;}
  69. .progressbar-63{background-position:-3402px 0px;}
  70. .progressbar-64{background-position:-3456px 0px;}
  71. .progressbar-65{background-position:-3510px 0px;}
  72. .progressbar-66{background-position:-3564px 0px;}
  73. .progressbar-67{background-position:-3618px 0px;}
  74. .progressbar-68{background-position:-3672px 0px;}
  75. .progressbar-69{background-position:-3726px 0px;}
  76. .progressbar-70{background-position:-3780px 0px;}
  77. .progressbar-71{background-position:-3834px 0px;}
  78. .progressbar-72{background-position:-3888px 0px;}
  79. .progressbar-73{background-position:-3942px 0px;}
  80. .progressbar-74{background-position:-3996px 0px;}
  81. .progressbar-75{background-position:-4050px 0px;}
  82. .progressbar-76{background-position:-4104px 0px;}
  83. .progressbar-77{background-position:-4158px 0px;}
  84. .progressbar-78{background-position:-4212px 0px;}
  85. .progressbar-79{background-position:-4266px 0px;}
  86. .progressbar-80{background-position:-4320px 0px;}
  87. .progressbar-81{background-position:-4376px 0px;}
  88. .progressbar-82{background-position:-4428px 0px;}
  89. .progressbar-83{background-position:-4482px 0px;}
  90. .progressbar-84{background-position:-4536px 0px;}
  91. .progressbar-85{background-position:-4590px 0px;}
  92. .progressbar-86{background-position:-4644px 0px;}
  93. .progressbar-87{background-position:-4698px 0px;}
  94. .progressbar-88{background-position:-4752px 0px;}
  95. .progressbar-89{background-position:-4806px 0px;}
  96. .progressbar-90{background-position:-4860px 0px;}
  97. .progressbar-91{background-position:-4914px 0px;}
  98. .progressbar-92{background-position:-4968px 0px;}
  99. .progressbar-93{background-position:-5022px 0px;}
  100. .progressbar-94{background-position:-5076px 0px;}
  101. .progressbar-95{background-position:-5130px 0px;}
  102. .progressbar-96{background-position:-5184px 0px;}
  103. .progressbar-97{background-position:-5238px 0px;}
  104. .progressbar-98{background-position:-5292px 0px;}
  105. .progressbar-99{background-position:-5346px 0px;}
  106. .progressbar-100{background-position:-5400px 0px;}</style>
  107. </head>
  108. <body>
  109. <div class="progressbar">
  110. <span>10</span>%               
  111. </div>
  112. <div class="progressbar">
  113. <span>20</span>%               
  114. </div>
  115. <div class="progressbar">
  116. <span>30</span>%               
  117. </div>
  118. <div class="progressbar">
  119. <span>50</span>%               
  120. </div>
  121. <div class="progressbar">
  122. <span>70</span>%               
  123. </div>
  124. <div class="progressbar">
  125. <span>90</span>%               
  126. </div>
  127. <div class="progressbar">
  128. <span>100</span>%               
  129. </div>
  130. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  131. <script>$(function(){
  132. $('.progressbar').each(function(index,el){
  133. var num=$(this).find('span').text();
  134. $(this).addClass('progressbar-' + num);
  135. });
  136. });
  137. </script>
  138. </body>
  139. </html>
复制代码

这种方法相对来说就比较简单了，但是也是挺麻烦的一种。
首先，我们需要一个非常冗长的一个图片……图片的内容，就是每1°旋转角度，就是一张图片…100张…
然后让容器为这个图片为背景，理由用background-position写100个类样式做背景偏移…很累啊….进度每改变一下，就引用相对应的类。
虽然这种方法虽然比较繁琐比较麻烦，但是实现出来的效果，也较纯css3的丰富，兼容性也更好。

效果截图：
演示截图.jpg

需要的图片：
progressbar.rar (9.78 KB, 下载次数: 794)

看大家倾向于那种效果吧，个人感觉各有利弊各有春秋。如果有更好的方法和思路，欢迎反馈。



以上所有实例打包：
所有实例打包.rar (11.69 KB, 下载次数: 3)

css3环形百分比
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2025-10-31 14:41

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表