<!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. CF 461B Appleman and Tree 树形DP

    Appleman has a tree with n vertices. Some of the vertices (at least one) are colored black and other ...

  2. [复变函数]第11堂课 3.3 Cauchy 积分定理及其推论

    0. 引言 (1) Cauchy 积分定理: 设 $D$ 为 $(n+1)$ 连通区域, $f$ 在 $D$ 内解析且连续到边界 $C$, 则 $\dps{\int_C f(\zeta)\rd \ze ...

  3. MyBatis返回主键

    网上给的例子都很简单 , 只要用useGeneratedKey就行了. @Insert({ "INSERT INTO money_record_increasement (id, creat ...

  4. Java中的GC操作及相关概念

    一.GC Roots Tracing的基本思路:通过一系列名为"GC Roots"的对象作为起始点,从这些节点开始向下搜索,搜索所经过的路径称为引用链(Reference Chai ...

  5. cocos2dx一个场景添加多个层

    首先创建两个layer,以下是头文件 #pragma once#include "cocos2d.h"USING_NS_CC;class BackgroundLayer : pub ...

  6. 学习Webservice之入天气小试

    主要方法是:通过程序中设置代理用公司内网访问外部Webservice public InputStream getSoapInputStream(String url) { InputStream i ...

  7. PHP获取文件目录dirname(__FILE__),getcwd()

    以discuz x2.5为例 D:/www/upload2.5/test.php D:/www/upload2.5/source/class/class_test.php test.php文件如下 & ...

  8. H264 Profile

    H.264有四种profile,对应四种H264画质级别.每个profile支持一组特定的编码功能,并支持一类特定的应用,分别是BP.EP.MP.HP: 1. BP-Baseline Profile ...

  9. Fiddler录制jmeter脚本，干货分享

    ​     我们知道以前jmeter的脚本来源有三个,手动书写.badboy录制.自带的录制功能(jmeter3.0该功能还比较好),目前我们又多了一个fiddler生成,自上次分享出来fiddler ...

  10. Appnium移动自动化框架初探

    作者:cryanimal QQ:164166060 本文简要介绍了appnium自动化框架的架构.加载流程.支持语言.相关配置,以及元素定位工具等. 官方网站: http://appium.io Ap ...