Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-08-18 11:23:11

jQuery环形效果百分比统计网页统计图

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>环形</title>
<style>
        *{margin:0px;padding: 0px;}
        body{padding: 0px 0px 300px;}
        .main{width: 960px; margin: 0px auto;overflow: hidden;}
        .mainTit{color: #f00; font-size: 50px;font-weight:bold;text-align: center; text-shadow: 3px 1px 6px #f60; padding: 10px 0px;}
        .mainBlock{overflow: hidden;}
        .main .block{float: left; width: 265px; height: 265px; margin: 0px 10px; overflow: hidden;}
        .main .block div{width: 100%; height: 100%; }
        .main .remark{color: #333;font-size: 12px; text-align: center; margin-top: 10px;}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div class="main">
<div class="mainTit"></div>
<div class="mainBlock">
       <div class="block"><div id="test1"></div></div>
       <div class="block"><div id="test2"></div></div>
       <div class="block"><div id="test3"></div></div>
       <div class="block"><div id="test4"></div></div>
       <div class="block"><div id="test5"></div></div>
       <div class="block"><div id="test6"></div></div>
   </div>
    </div>
<script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script>
    <script src="http://files.cnblogs.com/kuikui/raphael.js"></script>
    <script type="text/javascript">
        (function($) {
            $.drawCircle = function(options) {
                var defaults = {
                    elem: null,
                    size: 0,
                    start: null,
                    end: null,
                    endSucc: null
                };
                var opts = $.extend({}, defaults, options);
                if (!opts.elem) {
                    return;
                }
                var r = Raphael(opts.elem, 300, 300),
                    rad = 80,
                    init = true,
                    speed = 200,
                    z = null,
                    txt = null;
                var tmptime = opts.end - opts.start,
                    ds = null,
                    dm = null,
                    dh = null,
                    dstop = null;

if (opts.size === 0) {
                    opts.color = "#cecece";
                } else {
                    opts.color = getColor(opts.size) || "#000000";
                }

r.path().attr({
                        arc: [100, 100, rad],
                        'stroke-width': 20,
                        'stroke': "#cecece"
                    });

r.path().attr({
                        arc: [100, 100, 110],
                        'stroke-width': 2,
                        'stroke': "#cecece"
                    });

if(!!opts.size){
                        z = r.path().attr({
                            arc: [0.01, 100, rad],
                            'stroke-width': 20,
                            'stroke': opts.color,
                            'cursor': "pointer"
                        });

updateVal(opts.size, 100, 80, z, 2);
                    }

var circle = r.circle(150, 150, 70);
                    circle.attr("fill", "#fff");
                    circle.attr("stroke", "none");
                    circle.glow({
                        width: 8,
                        opacity: 0.3,
                        offsety: 4
                    });

txt = r.text(150, 150, opts.size + "%").attr({
                        font: "100 36px Arial",
                        fill: opts.color
                    });

};

function dinit() {
                    if (tmptime > 0) {
                        ds = parseInt(tmptime % 60);
                        dm = parseInt(tmptime / 60) % 60;
                        dh = parseInt(tmptime / 3600) % 24;
                        
                        txt.remove();
                        txt = r.text(150, 150, dh + ":" + dm + ":" + ds).attr({
                            font: "100 36px Arial",
                            fill: opts.color
                        });
                        // txt.toFront();
                    }

};

function getColor(size) {
                    var arr = [];
                    for (var i = 0; i <= 255; i++) {
                        arr.push("rgb(" + i + "," + (255 - i) + ","+0+")");
                    }
                    return arr[parseInt(size * 2.55)];
                };

$(function() {
            $.drawCircle({
                elem: "test1",
                size: 0,
                start: 0,
                end: 6600
            });
            $.drawCircle({
                elem: "test2",
                size: 0
            });
            $.drawCircle({
                elem: "test3",
                size: 25
            });
            $.drawCircle({
                elem: "test4",
                size: 55
            });
            $.drawCircle({
                elem: "test5",
                size: 85
            });
            $.drawCircle({
                elem: "test6",
                size: 100
            });
        });
    </script>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：如何让一个div滚动到页面顶部的时候固定在顶部的网页代码

下一篇文章：支持多种语言的php网页编辑器

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

环形百分比jquery动画特效代码

推荐阅读：

相关代码：

标签分类