有哪些信誉好的足球投注网站- 1、本文档共14页，可阅读全部内容。
- 2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
《利用jQuery和CSS实现环形进度条
利用jQuery和CSS实现环形进度条
最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的：
实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过jQuery和CSS实现的，下面就一一道来：
方法一：jQuery + CSS3
实现原理
原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。
半环的实现
先来看其结构。
HTML
div class=pie_right
div class=right/div
div class=maskspan0/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_leftdiv class=left/div/div
div class=pie_rightdiv class=right/div/div
div class=maskspan0/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-radi
文档评论（0）