实现原理

原理非常的简单,在这个方案中,最主要使用了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 + CSS3实现环形进度条的更多相关文章

  1. CSS3绘制环形进度条

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. CSS3实现环形进度条?

    两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转

  3. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  4. 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  5. css3实现饼状图进度及环形进度条

    1 <!-- 饼图 --> <div class="pie"></div> <hr /> <!-- 环形图 --> &l ...

  6. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  7. 基于svg的环形进度条

    其实需求是这么一个基于日期的环形进度条,开始用css3写了一下感觉太麻烦了,于是抽了点时间用svg画了一个. 不多说 上代码: css: <style> circle { -webkit- ...

  8. iOS带动画的环形进度条(进度条和数字同步)

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...

  9. iOS 开发技巧-制作环形进度条

    有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...

随机推荐

  1. OC版二分查找

    二分查找(也称折半查找)是很常见的一种在数组中查找数据的算法,作为一名程序员是应该必须会的.它的基础思想:获取数组的中间值,将数组分割成两份,利用中间值跟指定的值进行比较,如果中间值大于指定的值,就在 ...

  2. thinkphp中的ajax分页

    thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...

  3. C语言实现求字符串子集问题

    这个问题在于实现Apriori算法的时候需要求各个频繁集的关联规则,而这时需要在求得最大的频繁集中求各个频繁集的真子集.然后在实现这一步的时候被卡主了,第一反应是用递归完成,但是面对数据挖掘中庞大的项 ...

  4. CodeForces 652C Foe Pairs

    只要计算每个位置最多能到哪个位置,累加即可,DP从后往前预处理一下每个位置到达的最远位置. 有坑点:输入的时候如果同一个点出发的,需要保存最小值. #include<cstdio> #in ...

  5. chart.js在html中画曲线图

    http://www.bootcss.com/p/chart.js/docs/ http://www.chartjs.org/docs/   中有详细讲解 一.简介 Chart.js是一个基于HTML ...

  6. LPC2478内存布局以及启动方式

    LPC2478 是NXP公司推出的一款基于APR7TDMI-S的工控型MCU,内置RAM与flash,同时提供外部扩展flash和ram接口,拥有LCD控制器,其内存布局如下所示 其中Flash高达5 ...

  7. APP被苹果APPStore拒绝的各种原因 分类: ios相关 app相关 2015-06-25 17:27 200人阅读 评论(0) 收藏

    APP被苹果APPStore拒绝的各种原因 1.程序有重大bug,程序不能启动,或者中途退出. 2.绕过苹果的付费渠道,我们之前游戏里的用兑换码兑换金币. 3.游戏里有实物奖励的话,一定要说清楚,奖励 ...

  8. [转载] centos6.x x64 安装python2.7

    本文转载自: http://www.centoscn.com/image-text/install/2016/0323/6906.html CentOS的设计理念中有一点是:持久可用.要达到这个目的, ...

  9. Asp.Net集群中Session共享

    今天遇到了这个问题,于是研究了一下.要解决这个问题,首先就要明白一些Session的机理.Session在服务器是以散列表形式存在的,我们都知道Session是会话级的,每个用户访问都会生成一个Ses ...

  10. 【Xilinx-Petalinux学习】-03-PetaLinux通过eMMC方式启动

    前面说的我的硬件上有一颗eMMC的芯片,型号是MTFC4GACAJCN-4M IT,有4GB的容量. BOOT.bin的文件较小,只有不到3MB,但是image.ub的文件根据不同的需求,将来可能会越 ...