CSS3时钟式进度条
2020-12-13 02:15
阅读：292
YPE html>
标签：style class code java tar ext
CSS3时钟式进度条，加载完成时生成一个圆，数字慢慢变成100，适时的显示加载进度。友情提醒，如果预览时网页左下角提示错误，刷新一下就可以看到效果了；实际使用中不会出现这样的问题。
- Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS3时钟式进度条 - http-equiv="content-type" content="text/html;charset=gb2312">
- #cricle{width:200px;height:200px;position:relative;background:#333;overflow:hidden}
- #cricle
- .left,#cricle .right,#cricle .text{width:200px;height:200px}
- #cricle
- .text{position:absolute;top:0;left:0;z-index:41;color:#fff;font:26px/200px
- ‘arial‘;text-align:center}
- #cricle .mask{z-index:40}
- #cricle .mask,#cricle
- .bg{width:100px;height:200px;background:#333;position:absolute;top:0}
- #cricle
- .bg{background:url(/jscss/demoimg/201207/bg_green.png) no-repeat 0 0}
- #cricle
- .mask,#cricle .left .bg{left:0}
- #cricle .right{display:none}
- #cricle
- .right .bg{background-position:right
- top;right:0}
- id="cricle">
- class="left">
- class="bg">
- class="right">
- class="bg">
- class="text">
- var C = function(id){
- this.box =
- $("#"+id);
- this.left = this.box.find(".left");
- this.right =
- this.box.find(".right");
- this.mask =
- this.box.find(".mask");
- this.text =
- this.box.find(".text");
- this.d = 0;
- this.A =
- null;
- this.init();
- }
- C.prototype = {
- init :
- function(){
- var T = this;
- this.A =
- window.setInterval(function(){T.change()},80);
- },
- change :
- function(){
- var T =
- this;
- if(this.d>180){
- if(this.d>360){
- window.clearInterval(this.A);
- this.A
- =
- null;
- return;
- }
- this.right.show();
- this.mask.hide();
- }
- this.text.text(parseInt(this.d/3.6));
- this.left.css({
- "-webkit-transform":"rotate("+this.d+"deg)",
- "-moz-transform":"rotate("+this.d+"deg)"
- })
- this.d
- += 6;
- }
- }
- new
- C("cricle");
链接地址：http://www.codefans.net/jscss/code/3573.shtml
CSS3时钟式进度条,搜素材,soscw.com
CSS3时钟式进度条
标签：style class code java tar ext
原文地址：http://www.cnblogs.com/aimyfly/p/3716148.html
下一篇：Python学习的必备书籍
评论
亲，登录后才可以留言！