jquery实现WIN7本地磁盘容量条效果

 

 

原理简述：

使用两个嵌套的两个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'>&nbsp;<span class='partiName'></span>盘</div><div class='partitionBar'><div class='usedBar'></div></div><div class='partitionPara'>&nbsp;剩余&nbsp;<span class='remainData'></span>&nbsp;GB　　共&nbsp;<span class='fullData'></span>&nbsp;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);
        });    
    });