jQuery+CSS实现环形进度条的两种方法教程

最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的：

 

实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过jQuery和CSS实现的，下面就一一道来：

方法一：jQuery + CSS3

实现原理

原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。

半环的实现

先来看其结构。

HTML

 

 

 

 

 

 

<div class="pie_right">
    <div class="right"></div>
    <div class="mask"><span>0</span>%</div>
</div>

 

 

 

结构非常简单。这样的结构，大家一看就清楚。

CSS

.pie_right {
    width:200px;
    height:200px;
    position: absolute;
    top: 0;
    left: 0;
    background:#0cc;
}
.right {
    width:200px;
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute; 
    top: 0;
    left: 0;
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.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;
    background: #0cc;
    /* mask 是不需要剪切的，此处只是为了让大家看到效果*/
    clip:rect(0,auto,auto,75px); }

实现半圆还是挺简单的，利用border-radius做出圆角，然后利用clip做出剪切效果，(clip使用方法，详见站内介绍)，mask的部分是为了遮挡外面的容器，致使在视觉上产生圆环的效果：

 

旋转的话，那更容易实现了，就是在CSS的right中加入(我没做浏览器兼容代码，请大家自行加入)：

.right {
    transform: rotate(30deg);
}

 

 

这样就可以看到一个半弧旋转的效果了。

整环的实现

同样道理，拼接左半边圆环，为了让我们html结构更易懂以后写js更简便，我对结构做了一下改造，并作了效果优化：

HTML

 

 

 

 

 

 

 

 

 

<div class="circle">
    <div class="pie_left"><div class="left"></div></div>
    <div class="pie_right"><div class="right"></div></div>
    <div class="mask"><span>0</span>%</div>
</div>

 

 

 

CSS

.circle {
    width: 200px;
    height: 200px; 
    position: absolute;
    border-radius: 50%;
    background: #0cc;
}
.pie_left, .pie_right {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    display: block;
    width:200px;
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(30deg);
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
    clip:rect(0,100px,auto,0);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 16px;
}

效果如下：

 

圆环最终效果

Ok了，基本上我们的圆环已经实现完成了，下面是加入JS效果。

首先，我们需要考虑的是，圆环的转动幅度大小，是由圆环里面数字的百分比决定的，从0%-100%，那么圆弧被分成了每份3.6°;而在180°，也就是50%进度之前，左侧的半弧是不动的，当超过50%，左边的半弧才会有转动显示。

那么，原理明确之后，其jQuery代码如下(删除CSS中的旋转效果，在JS里重写)：

$(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
        } else {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        };
    });

});

则，改变mask里面的span 的数值，我们就会看到最终效果。

 

这样我们只要从后台获取当前流程的进度值，传给span，那么我们页面上就能看到这样圆环的进度效果啦。

jQuery + 图片

实现原理

这种方法相对来说就比较简单了，但是也是挺麻烦的一种。

首先，我们需要一个非常冗长的一个图片……图片的内容，就是每1°旋转角度，就是一张图片…100张…

例如：

 

然后让容器为这个图片为背景，理由用background-position写100个类样式做背景偏移…很累啊….进度每改变一下，就引用相对应的类。

HTML

我们类似于有这样的一个结构，当然这里面有很多个这样的结构：

 

 

<div class="progressbar">
    <span>0</span>%    
</div>

 

 

比如说我们的案例的中结构：

 

 

<div class="progressbar">
    <span>10</span>%       
</div>
<div class="progressbar">
    <span>20</span>%       
</div>
<div class="progressbar">
    <span>30</span>%       
</div>
<div class="progressbar">
    <span>50</span>%       
</div>
<div class="progressbar">
    <span>70</span>%       
</div>
<div class="progressbar">
    <span>90</span>%       
</div>
<div class="progressbar">
    <span>100</span>%      
</div>

 

 

CSS

样式是比较苦逼的事情，我们需要在每个位置修改他的background-position。也就是从0%~100%，将会有100个：

.progressbar {
    text-align: center;
    line-height: 44px;
    width: 44px;
    display: block;
    background: url(progressbar.png);
    height: 44px;
    font-size: 14px;
    margin-left:60px;
}
.progressbar-1 {background-position: 0px 0px;}
.progressbar-2 {background-position: -54px 0px;}
.progressbar-3 {background-position: -108px 0px;}
.progressbar-4 {background-position: -162px 0px;}
.progressbar-5 {background-position: -216px 0px;}
.progressbar-6 {background-position: -270px 0px;}
.progressbar-7 {background-position: -324px 0px;}
.progressbar-8 {background-position: -378px 0px;}
.progressbar-9 {background-position: -432px 0px;}
.progressbar-10 {background-position: -486px 0px;}
.progressbar-11 {background-position: -540px 0px;}
.progressbar-12 {background-position: -594px 0px;}
.progressbar-13 {background-position: -648px 0px;}
.progressbar-14 {background-position: -702px 0px;}
.progressbar-15 {background-position: -756px 0px;}
.progressbar-16 {background-position: -810px 0px;}
.progressbar-17 {background-position: -864px 0px;}
.progressbar-18 {background-position: -918px 0px;}
.progressbar-19 {background-position: -972px 0px;}
.progressbar-20 {background-position: -1026px 0px;}
.progressbar-21 {background-position: -1080px 0px;}
.progressbar-22 {background-position: -1134px 0px;}
.progressbar-23 {background-position: -1188px 0px;}
.progressbar-24 {background-position: -1242px 0px;}
.progressbar-25 {background-position: -1296px 0px;}
.progressbar-26 {background-position: -1350px 0px;}
.progressbar-27 {background-position: -1404px 0px;}
.progressbar-28 {background-position: -1458px 0px;}
.progressbar-29 {background-position: -1512px 0px;}
.progressbar-30 {background-position: -1566px 0px;}
.progressbar-31 {background-position: -1620px 0px;}
.progressbar-32 {background-position: -1674px 0px;}
.progressbar-33 {background-position: -1728px 0px;}
.progressbar-34 {background-position: -1782px 0px;}
.progressbar-35 {background-position: -1836px 0px;}
.progressbar-36 {background-position: -1890px 0px;}
.progressbar-37 {background-position: -1944px 0px;}
.progressbar-38 {background-position: -1998px 0px;}
.progressbar-39 {background-position: -2052px 0px;}
.progressbar-40 {background-position: -2106px 0px;}
.progressbar-41 {background-position: -2160px 0px;}
.progressbar-42 {background-position: -2214px 0px;}
.progressbar-43 {background-position: -2268px 0px;}
.progressbar-44 {background-position: -2322px 0px;}
.progressbar-45 {background-position: -2376px 0px;}
.progressbar-46 {background-position: -2430px 0px;}
.progressbar-47 {background-position: -2484px 0px;}
.progressbar-48 {background-position: -2538px 0px;}
.progressbar-49 {background-position: -2592px 0px;}
.progressbar-50 {background-position: -2700px 0px;}
.progressbar-51 {background-position: -2754px 0px;}
.progressbar-52 {background-position: -2808px 0px;}
.progressbar-53 {background-position: -2862px 0px;}
.progressbar-54 {background-position: -2916px 0px;}
.progressbar-55 {background-position: -2970px 0px;}
.progressbar-56 {background-position: -3024px 0px;}
.progressbar-57 {background-position: -3078px 0px;}
.progressbar-58 {background-position: -3132px 0px;}
.progressbar-59 {background-position: -3186px 0px;}
.progressbar-60 {background-position: -3240px 0px;}
.progressbar-61 {background-position: -3294px 0px;}
.progressbar-62 {background-position: -3348px 0px;}
.progressbar-63 {background-position: -3402px 0px;}
.progressbar-64 {background-position: -3456px 0px;}
.progressbar-65 {background-position: -3510px 0px;}
.progressbar-66 {background-position: -3564px 0px;}
.progressbar-67 {background-position: -3618px 0px;}
.progressbar-68 {background-position: -3672px 0px;}
.progressbar-69 {background-position: -3726px 0px;}
.progressbar-70 {background-position: -3780px 0px;}
.progressbar-71 {background-position: -3834px 0px;}
.progressbar-72 {background-position: -3888px 0px;}
.progressbar-73 {background-position: -3942px 0px;}
.progressbar-74 {background-position: -3996px 0px;}
.progressbar-75 {background-position: -4050px 0px;}
.progressbar-76 {background-position: -4104px 0px;}
.progressbar-77 {background-position: -4158px 0px;}
.progressbar-78 {background-position: -4212px 0px;}
.progressbar-79 {background-position: -4266px 0px;}
.progressbar-80 {background-position: -4320px 0px;}
.progressbar-81 {background-position: -4376px 0px;}
.progressbar-82 {background-position: -4428px 0px;}
.progressbar-83 {background-position: -4482px 0px;}
.progressbar-84 {background-position: -4536px 0px;}
.progressbar-85 {background-position: -4590px 0px;}
.progressbar-86 {background-position: -4644px 0px;}
.progressbar-87 {background-position: -4698px 0px;}
.progressbar-88 {background-position: -4752px 0px;}
.progressbar-89 {background-position: -4806px 0px;}
.progressbar-90 {background-position: -4860px 0px;}
.progressbar-91 {background-position: -4914px 0px;}
.progressbar-92 {background-position: -4968px 0px;}
.progressbar-93 {background-position: -5022px 0px;}
.progressbar-94 {background-position: -5076px 0px;}
.progressbar-95 {background-position: -5130px 0px;}
.progressbar-96 {background-position: -5184px 0px;}
.progressbar-97 {background-position: -5238px 0px;}
.progressbar-98 {background-position: -5292px 0px;}
.progressbar-99 {background-position: -5346px 0px;}
.progressbar-100 {background-position: -5400px 0px;}

JavaScript

当然，在这个效果中，我们也离不开JavaScript:

$(function() {
    $('.progressbar').each(function(index, el) {
        var num = $(this).find('span').text();
        $(this).addClass('progressbar-' + num);
    });
});

 

效果如下：

 

虽然这种方法虽然比较繁琐比较麻烦，但是实现出来的效果，也较纯css3的丰富，兼容性也更好。

到这里，这个案例算是完成，看大家倾向于那种效果吧，个人感觉各有利弊各有春秋。如果有更好的方法和思路，欢迎大家一起讨论。

时间： 2024-10-01 11:15:59

jQuery+CSS实现环形进度条的两种方法教程的相关文章

Windows 8开发入门（七） Windows 8 中的三种进度条和两种定时器

在Windows 8中的默认进度条也与时俱进,和之前Silverlight中的不一样.本文将讲述三种不同的进度条 ,另外在本文中也会将两种定时器. 进度条 主要属性: Value:当前进度值. Maximum:最大进度值. IsIndeterminate:指定进度条是否确定. 确定进度条:进度明 确的进度条,已完成进度以另外一种颜色显示 关键代码: <ProgressBar Maximum="100" Value="0" Height="20&quo

jQuery的 $.ajax防止重复提交的两种方法(推荐)_jquery

下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'

jquery获取iframe中的dom对象(两种方法)

父窗口中操作iframe:$(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗口:$(window.parent.document) 接下来就可以继续获取iframe内的dom了. 获取iframe内的dom对象有两种方法 1 $(window.frames["iframeChild"].document).find("#child") 2 $(&

MySql安装启动两种方法教程详解_Mysql

mysql安装启动两种方法如下所示: 方法一(简单版): 1.cmd进入mysql安装的bin目录:mysqld.exe –install 2.net start mysql 服务启动(或者选择计算机->(右键)管理->服务和应用程序->服务->mysql右键启动服务) 3.mysql –uroot –p 回车 4.password留空 回车 方法二: 1.cmd进入到mysql安装目录bin,如:D:\MySQL Server 5.6\bin 2.mysqld --console

PHP 文件上传进度条的两种实现方法的代码_php技巧

目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩展模块 uploadprogress实现(http://pecl.php.net/package/uploadprogress)我这里举两个分别实现的例子供参考,更灵活的应用根据自己需要来修改. APC实现方法: 安装APC,参照官方文档安装,可以使用PECL模块安装方法快速简捷,这里不说明 配置p

Extjs实现进度条的两种便捷方式_extjs

做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候');弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait('提示','正在处理数据,请稍候'); 复制代码 代码如下: Ext.Ajax.request({ url:'DataAction.ashx?method=update', params:{It

jquery判断页面网址是否有效的两种方法_jquery

方法一:(jQuery方法: 适用所有浏览器) HTML页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.7.1.min.js">&l

实现简单提示条的两种方法：

<SCRIPT> <!-- function runCode(ID){    //定义运行代码的函数,    var code=event.srcElement.parentElement.children[ID].value;//即要运行的代码.    var newwin=window.open('','','');    //打开一个窗口并赋给变量newwin.    newwin.opener = null    newwin.document.write(code);     

jquery实现模拟百分比进度条渐变效果代码_jquery

本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script