原理简述:
使用两个嵌套的两个DIV实现,外层DIV的宽度自己定义,内层DIV的宽度根据外层DIV的百分比定义,并设置背景颜色。再用jquery的animate方法实现内层DIV宽度从零开始增加。
HTML Code:
<div id="diskDiv"></div>
CSS Code:
.partitionDiv {width:200px; height:66px; border:1px solid #999; background:url("./images/diskIcon.png") no-repeat left center; padding-left:64px; padding-right:5px; float:left; margin:5px;} .partitionDiv:hover {background-color:#3FF;} .partitionName, .partitionPara {height:22px; width:100%; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:22px;} .partitionBar {width:100%; height:20px; border-radius:5px; border:1px solid #3C9;} .usedBar {width:0; height:100%; background-color:blue;}
JS Code:
$(function() { var c = ['C', '24', '100']; var d = ['D', '32', '200']; var partiArray = [c, d]; var innerDiv = "<div class='partitionDiv'><div class='partitionName'> <span class='partiName'></span>盘</div><div class='partitionBar'><div class='usedBar'></div></div><div class='partitionPara'> 剩余 <span class='remainData'></span> GB 共 <span class='fullData'></span> GB</div></div>"; //遍历分区数组,生成相同数量的容量条效果 for(var i=0; i<partiArray.length; i++){ $('#diskDiv').append(innerDiv); } //设置磁盘名称 $('span.partiName').each(function(i) { $(this).html(partiArray[i][0]); }); //设置剩余容量 $('span.remainData').each(function(i) { $(this).html(partiArray[i][1]); }); //设置磁盘总容量 $('span.fullData').each(function(i) { $(this).html(partiArray[i][2]); }); //设置已用空间,即容量条的长度 $('div.usedBar').each(function(i) { var barWidth = (1-partiArray[i][1]/partiArray[i][2])*100 + '%'; //jquery动画效果 $(this).animate({barWidth},2000); }); });