zoukankan      html  css  js  c++  java
  • 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);
            });    
        }); 
  • 相关阅读:
    FZU-SE-K 第一次累计得分排行榜
    OO第四次总结
    OO第二次总结
    面向对象构造与设计第一次总结
    软件工程实践2019第四次作业
    蹒跚的第一步
    学期导图
    一篇随笔
    【软工】提问回顾与个人总结
    【软工】结对项目博客
  • 原文地址:https://www.cnblogs.com/yoomin/p/3478049.html
Copyright © 2011-2022 走看看