<!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>CSS3时钟式进度条</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#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}
</style>
<script src="/ajaxjs/jquery1.3.2.js"></script>
</head>
<body>
<div id="cricle">
<div class="mask"></div>
<div class="left">
<div class="bg"></div>
</div>
<div class="right">
<div class="bg"></div>
</div>
<div class="text"></div>
</div>
<script type="text/javascript">
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");
</script>
</body>
</html>

原文链接：http://www.codefans.net/jscss/code/3573.shtml

CSS3 圆形时钟式网页进度条的更多相关文章

  1. ProgressBar.js – 漂亮的响应式 SVG 进度条

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...

  2. 用css2属性clip实现网页进度条

    前言 看了网上一些关于网页进度条样式的资料,有很多方式实现,针对其展现形式,有用图片的,有用css2属性clip,有用flash的,本人就学会了一种,下面就简单来介绍一下. css2的属性clip 如 ...

  3. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  4. HTML5-svg圆形饼状图进度条实现原理

    <svg width="440" height="440" viewbox="0 0 440 440"> <circle ...

  5. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  6. 自定义控件之圆形颜色渐变进度条--SweepGradient

    前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] ...

  7. css3实现不同进度条

    进度条类型1(渐变进度条) 效果1:图片实现进度条 思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...

  8. HTML5圆形百分比进度条插件circleChart

    在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...

  9. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

随机推荐

  1. PLSQL_性能优化工具系列02_SQL Tuning Health-Check Script (SQLHC)

    2014-08-23 Created By BaoXinjian

  2. powerdesigner中将表的name在生成建表sql时生成注释

    1.为powerdesigner的表设置注释方法: powerdesigner默认没有注释: 设置方法: 选择那个表 右键- >Properties- >Columns- >Cust ...

  3. JAVA坏境变量中的JAVA_HOME path classpath 的设置与作用。

    在把jdk安装到计算机中之后,我们来进行设置使java环境能够使用. 首先右键点我的电脑.打开属性.然后选择“高级”里面的“环境变量”,在新的打开界面中的系统变量需要设置三个属性“JAVA_HOME” ...

  4. 20145305 《Java程序设计》第6周学习总结

    教材学习内容总结 1.输入串流代表对象为java.io.InputStream实例,输出串流代表对象为java.io.OutputStream实例 2.InputStream与OutputStream ...

  5. struts (七) 域模型

    1.域模型获取参数 domain Model 2. vo  value object  值对象 do  data object 数据对象 dto data transfer object  数据传输对 ...

  6. role在标签中的作用是什么？

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  7. Delphi的Socket编程步骤(repulish)

    转贴自:http://topic.csdn.net/t/20010727/16/212155.html ClientSocket 和ServerSocket几个重要的属性:   1.client和se ...

  8. nginx 反向代理（Reverse Proxy）与耗时记录

    反向代理服务器位于实际的服务器之前,他能够缓存服务器响应,加速访问,同时也启到了负载均衡服务器的效果.反向代理服务器解析客户端请求,根据负载均衡算法转发到不同的后台服务器上.用户和后台服务器之间不再有 ...

  9. 解决tomcat默认45s启动超时的问题

    进入工作空间目录下的.metadata\.plugins\org.eclipse.wst.server.core子目录,找到servers.xml文件,编辑它,找到start-timeout这一行,把 ...

  10. HYSBZ 1061 志愿者招募 【最小费用流】【差分】【最小费用流模板】

    #include<stdio.h> #include<queue> #define MAXN 1003 #define MAXM 10002*4 #define INF 100 ...