原理简述:
使用两个嵌套的两个DIV实现,外层DIV的宽度自己定义,内层DIV的宽度根据外层DIV的百分比定义,并设置背景颜色。再用jquery的animate方法实现内层DIV宽度从零开始增加。
HTML Code:
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 = ""; //遍历分区数组,生成相同数量的容量条效果 for(var i=0; i盘剩余 GB 共 GB