注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

使用raphael--圆形进度条  

2015-04-02 09:49:12|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>圆形进度条</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<script src="http://js.jrjimg.cn/lib/jquery-1.7.2.min.js"></script> 
<script src="raphael.2.1.0.min.js"></script> 
<style> 
#txt{ 
    width:74px; 
    height:74px; 
    line-height:74px; 
    position:absolute; 
    margin-top:-74px; 
    text-align:center; 
    color:#9e9fa3; 
    font-size:18px; 
    font-family:Arial; 
</style> 
<script> 
 
var demo = { 
     
    paper: null, 
 
    init: function(){ 
        //初始化Raphael画布 
        this.paper = Raphael("bg", 74, 74); 
 
        //把底图先画上去 
        this.paper.image("progressBg.png", 0, 0, 74, 74); 
 
        //进度比例,0到1,在本例中我们画65% 
        //需要注意,下面的算法不支持画100%,要按99.99%来画 
        var percent = 0.65, 
            drawPercent = percent >= 1 ? 0.9999 : percent; 
 
        //开始计算各点的位置,见后图 
        //r1是内圆半径,r2是外圆半径 
        var r1 = 26, r2 = 31, PI = Math.PI, 
            p1 = { 
                x:37,  
                y:69 
            }, 
            p4 = { 
                x:p1.x, 
                y:p1.y - r2 + r1 
            }, 
            p2 = {  
                x:p1.x + r2 * Math.sin(2 * PI * (1 - drawPercent)), 
                y:p1.y - r2 + r2 * Math.cos(2 * PI * (1 - drawPercent)) 
            }, 
            p3 = { 
                x:p4.x + r1 * Math.sin(2 * PI * (1 - drawPercent)), 
                y:p4.y - r1 + r1 * Math.cos(2 * PI * (1 - drawPercent)) 
            }, 
            path = [ 
                'M', p1.x, ' ', p1.y, 
                'A', r2, ' ', r2, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y, 
                'L', p3.x, ' ', p3.y, 
                'A', r1, ' ', r1, ' 0 ', percent > 0.5 ? 1 : 0, ' 0 ', p4.x, ' ', p4.y, 
                'Z' 
            ].join(''); 
 
        //用path方法画图形,由两段圆弧和两条直线组成,画弧线的算法见后 www.it165.net
        this.paper.path(path) 
            //填充渐变色,从#3f0b3f到#ff66ff 
            .attr({"stroke-width":0.5, "stroke":"#c32ec3", "fill":"90-#3f0b3f-#ff66ff"}); 
 
        //显示进度文字 
        $("#txt").text(Math.round(percent * 100) + "%"); 
    } 
 
}; 
 
$(function(){ 
    demo.init(); 
}); 
</script> 
</head> 
<body> 
 
<!-- 承载图形主体 --> 
<div id="bg"></div> 
<!-- 承载进度文字 --> 
<div id="txt"></div> 
 
</body> 
</html> 

  评论这张
 
阅读(827)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017