动态显示百分圆

<!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动态显示百分比圆的更多相关文章

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

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

  2. 8款超酷体验的jQuery/CSS3应用插件

    1.jQuery/CSS3实现Android Dock菜单效果 这是一款基于jQuery和CSS3的Android Dock菜单效果,点击底部的按钮即可让应用图标浮动上来,并且按钮也出现3D的翻转效果 ...

  3. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

  4. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  5. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  6. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  7. 使用 jQuery & CSS3 制作美丽的照片画廊

    在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所 ...

  8. jQuery+css3 弹幕

    写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. Linux 优化详解

    一.引子 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长期和持续的过程,不是说现在又花了.测试了,以后就可以一劳永逸,而不是说 ...

  2. discuz修改附件出售用其他积分，与帖子不一样

    现实中我遇到了这种情况,一个资源可以用两种积分购买,于是我决定用售卖贴和出售附件的方式,附件内容与贴内隐藏内容是一样的,但目前discuz的出售主题和附件使用的是同一种积分,有了此修改 1.首先是显示 ...

  3. clone中的浅复制和深复制

    clone:用于两个对象有相同的内容时,进行复制操作. 提示:Java中要想自定义类的对象可以被复制,自定义类就必须实现Cloneable中的clone()方法. 浅复制:另一个对象用clone()方 ...

  4. 译 - Cassandra 数据建模的基本规则

    Basic Rules of Cassandra Data Modeling 原文地址:http://www.datastax.com/dev/blog/basic-rules-of-cassandr ...

  5. Fulfilling Work: The Shippers More entrepreneurs hire 'fulfillment' outfits to store and ship their products

    By Stu Woo June 23, 2011 Brett Teper faced a logistical problem when he and a partner founded ModPro ...

  6. BVT、EVT、DVT、PVT产品开发几个阶段

      EVT EVT(Engineering Verification Test) 工程验证 产品开发初期的设计验证.设计者实现样品时做初期的测试验证,包括 功能和安规测试,一般由 RD(Researc ...

  7. FPGA选型

    工欲善其事必先利其器,开发FPGA的第一步,当然是选择一片符合你设计需求的芯片. 但是芯片种类那么多,老板又要你越省越好,硬件工程师也天天问你到底该用哪块芯片,怎么办? 今天正好可以跟大家聊聊这些问题 ...

  8. 【转】utf-8与Unicode的转化

    作者:uuspider链接:https://www.zhihu.com/question/23374078/answer/65352538来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  9. 【dp】New Keyboard

    http://codeforces.com/gym/101397 B dp[i][j][k]: i为前一个行动的状态,0-switch.1-type,j为当前状态layout的编号,k 是已键入的字符 ...

  10. TCP系列45—拥塞控制—8、SACK关闭的拥塞撤销与虚假快速重传

    一.概述 这篇文章介绍一下TCP从Recovery状态恢复到Open状态的时候cwnd的更新.我们在tcp重传部分的文章中曾经介绍过虚假重传的概念,Linux在探测到虚假重传的时候就会执行拥塞撤销操作 ...