预览
关于
IE6对透明PNG支持不佳，在此使用了IEPNGFIX行为脚本：
<style type="text/css">
.progress-bar .progress-bar-image, .progress-bar .progress-bar-image span{behavior: url(css/iepngfix.htc);}
.progress-bar>span{behavior:none;}
</style>
<!--[if lt IE 7]>
<script type="text/javascript" src="css/iepngfix_tilebg.js"></script>
<![endif]-->
同时,IEPNGFIX当前版本对于单张图片背景定位支持不错。但当我进展到CSS Sprite这一步时，IE6在Z轴最上面的一张，用来做遮盖的图片溢出了3个像素，解决如下：
<style type="text/css">
*html .progress-bar .progress-bar-image{overflow:hidden; height:22px;}
</style>
图片的叠加顺序：
全部代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ambar-ProgressBar-ellipse</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="css/iepngfix_tilebg.js"></script>
<![endif]-->
<style type="text/css">
body{font-family:"Comic Sans MS", cursive;color:#071;}
.progress-bar{width:405px;height:137px; background:#becd79;font-size:17px; font-weight:bold; padding-top:5px;text-align:center;}
.progress-bar div{width:316px;height:19px; line-height:19px; margin:3px auto;}
.progress-bar div span.min,
.progress-bar div span.max{width:3em; float:left;}
.progress-bar div em,
.progress-bar div span{display:block;height: inherit;}
.progress-bar .progress-bar-image,
.progress-bar .subject,
.progress-bar .cover{background-image:url(progressbar-ellipse.png); background-repeat:no-repeat;}
.progress-bar .progress-bar-image{margin:0 5px; width:200px; position:relative; height:19px;background-position:0 -19px; float:left;}
.progress-bar .progress-bar-image *{position:absolute;top:0;left:0;}
.progress-bar .progress-bar-image span.subject{background-position:100% -38px;text-indent:-2009em;
top:1px;left:1px;width:118px;height:17px;}/*width:0-198px*/
.progress-bar .progress-bar-image span.cover{background-position:0 0;width:200px; height:19px;}
.progress-bar p{clear:both;font-size:12px; line-height:1;}
.dashed{border:dashed #fff;border-width:3px 0;}
.progress-bar .progress-bar-image,
.progress-bar .progress-bar-image span{behavior: url(css/iepngfix.htc);}
.progress-bar>span{behavior:none;}
</style>
<style type="text/css">
*html .progress-bar .progress-bar-image{overflow:hidden; height:22px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('span.subject').each(function(){
var $this=$(this);
var w=$this.width();
//$this.width(0);
var timer,count=0;
(function(){
timer=setInterval(function(){
if(count >=w ){
clearInterval(timer);
}
$this.width(count++);
},22);
})();
});
})
</script>
</head>
<body>
<div class="progress-bar dashed">
<h3>118 GEKAUFT</h3>
<div class="num"><span class="min">13<em>min</em></span><span class="progress-bar-image"><span class="subject"> 118<em>available</em> </span><span class="cover"></span></span><span class="max">118<em>max</em></span></div>
<p>Noch 41 käufer werden benötigt!</p>
</div>
<div class="progress-bar dashed">
<h3>18 GEKAUFT</h3>
<div class="num"><span class="min">13</span><span class="progress-bar-image"><span class="subject" style="width:18px;"> 18 </span><span class="cover"></span></span><span class="max">50</span></div>
<p>Noch 41 käufer werden benötigt!</p>
</div>
<div class="progress-bar dashed">
<h3>68 GEKAUFT</h3>
<div class="num"><span class="min">13</span><span class="progress-bar-image"><span class="subject" style="width:68px;"> 68 </span><span class="cover"></span></span><span class="max">50</span></div>
<p>Noch 41 käufer werden benötigt!</p>
</div>
<div class="progress-bar dashed">
<h3>198 GEKAUFT</h3>
<div class="num"><span class="min">13</span><span class="progress-bar-image"><span class="subject" style="width:198px;"> 198 </span><span class="cover"></span></span><span class="max">50</span></div>
<p>Noch 41 käufer werden benötigt!</p>
</div>
</body>
</html>
下载(ie6必须)和预览：
/Files/ambar/demos/progressbar/ProgressBar-ellipse.zip
/Files/ambar/demos/progressbar/ProgressBar-ellipse.htm
Tag标签: css,rounded,progressbar,control
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
