jquery、css3动态显示百分比圆
动态显示百分圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.circle {
width: 200px;
height: 200px;
position: relative;
float:left;
border-radius: 50%;
background: #F64E58;
overflow: hidden;
}
.pie_left, .pie_right {
width: 200px;
height: 200px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
width:200px;
height:200px;
background:#C3C3C3;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
transition: all 2s linear; }
.left{transition: all 2s linear .5s;} .right{
/* transform: rotate(30deg);*/
}
.pie_right, .right {
clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
clip:rect(0,100px,auto,0);
}
.theValue {
width: 180px;
height: 180px;
border-radius: 50%;
top: 10px;
left: 10px;
background: white;
position: absolute;
text-align: center;
line-height: 180px;
font-size: 20px;
color: #F64E58; }
</style>
</head>
<body>
<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="theValue"><span class="vauNum">81</span>%</div>
</div>
<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="theValue"><span class="vauNum">20</span>%</div>
</div>
<script type="text/javascript">
$(function() {
$('.circle').each(function(index, el) {
var num = $(this).find('.vauNum').text() * 3.6;
if (num<=180) { $(this).find('.right').animate({
aa:num
},{
step:function(now,fx){ $(this).css('transform', "rotate(" +now + "deg)");
},
duration:1500
})
} else{ var that=$(this).find('.right');
that.css('transform', "rotate(180deg)");
$(this).css('transform', "rotate(0deg)");
$(this).find('.left').animate({
cc:num-180 },{
step:function(now,fx){
console.log(now+"ccc"); //参数step:规定每个动画的每一步完成之后要执行的函数
// now:是当前动画正在改变的属性的实时值;
// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素:elem;
// 动画正在改变的属性:prop;
// 正在改变属性的当前值:now;
// 正在改变属性的结束值:end;
// 正在改变属性的单位:unit;等
// 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值 $(this).css('transform', "rotate(" + (now) + "deg)"); },
duration:1500
}) };
}); });
</script>
</body> </html>
jquery、css3动态显示百分比圆的更多相关文章
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- 8款超酷体验的jQuery/CSS3应用插件
1.jQuery/CSS3实现Android Dock菜单效果 这是一款基于jQuery和CSS3的Android Dock菜单效果,点击底部的按钮即可让应用图标浮动上来,并且按钮也出现3D的翻转效果 ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 使用 jQuery & CSS3 制作美丽的照片画廊
在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...
- jQuery+css3 弹幕
写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
随机推荐
- 二、Django快速安装
一.安装Python 作为一个Python Web框架,Django依赖Python.从Django适用于哪些版本的Python可以获取更多信息.较新版本的Python内置一个轻量级的数据库SQLit ...
- 用树莓派Raspberry Pi和Micro:bit做一个自拍器
在这个项目中,我们将使用Python来构建一个由Micro:bit触发树莓派Raspberry Pi和相机模块的自拍器.这是开始使用硬件和简单文本编程的好方法. 我们将学习: 如何设置Raspberr ...
- Unity初级案例——贪吃蛇
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...
- python编辑购物车
一.需求分析 输入工资金额,进入购物车,并打印输出商品编号和价格,用户可以通过输入商品编号进行商品选购 余额不足时,打印提示信息 通过q进行退出结算 购物车能够循环购物 二.代码实现 ShoopCar ...
- Memcached&PHP-Memcache安装配置
参考文档: memcache官网:https://memcached.org/ 参考:http://www.runoob.com/memcached/memcached-install.html 参考 ...
- linux-sftp-指定端口号登录远程主机
sftp -oPort=60001 root@192.168.0.254 -o选项来指定端口号 -oPort=远程端口号
- [Algorithm] A* Search Algorithm Basic
A* is a best-first search, meaning that it solves problems by searching amoung all possible paths to ...
- python struct详解
转载:https://www.cnblogs.com/gala/archive/2011/09/22/2184801.html 有的时候需要用python处理二进制数据,比如,存取文件,socket操 ...
- OpenNF tutorial复现
这篇博客记录了自己实现OpenNF官网上tutorial的过程和遇见的问题,如果有不对的地方还请批评指正! tutorial链接 实验内容 这个实验展示了如何迅速且安全地把一个TCP流从一个NF实例迁 ...