jquery实现WIN7本地磁盘容量条效果
发布日期:2021-10-23 14:13:22 浏览次数:4 分类:技术文章

本文共 1026 字,大约阅读时间需要 3 分钟。

 
 

原理简述:

使用两个嵌套的两个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 = "
 
 剩余 
 GB  共 
 GB
"; //遍历分区数组,生成相同数量的容量条效果 for(var i=0; i

 

 

 

 

转载于:https://www.cnblogs.com/yoomin/p/3478049.html

转载地址:https://blog.csdn.net/weixin_30588827/article/details/98977466 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:插值与拟合(最小二乘法)
下一篇:Git问题总结

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月17日 16时26分13秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

脚本语言php是什么意思,PHP脚本语言 2019-04-21
matlab数学规划模型,数学规划模型 2019-04-21
视频提取音频php,如何提取视频中的音频,从视频文件中提取出音频输出成MP3格式... 2019-04-21
diy.php添加验证码,织梦dedecms自定义表单中加入验证码 2019-04-21
在php脚本中 通过可以获取,在PHP中,可以使用Unix时间戳获取精确的脚本执行时间。... 2019-04-21
s2-045 php exp,S2-045-EXP.py --Struts2任意代码执行漏洞 (S2-045,CVE-2017-5638) 2019-04-21
linux sdk 窗口句柄,Venus: 针对Linux平台上,对常用的系统API进行面向对象的封装SDK。... 2019-04-21
c语言程序设计 科学出版社习题答案,C语言程序设计(科学出版社)第4章 课后习题参考答案.doc... 2019-04-21
c语言 无错 但只运行一半,求哈夫曼编码时程序运行到一半就终止了,编译无错... 2019-04-21
deepin linux 2014安装,2014.2版本的Deepin虚拟机安装浅谈(就是深度Linux) 2019-04-21
android 限速工具,Android下载器之限速篇 2019-04-21
html刷新ajax实现原理,AJAX的原理—如何做到异步和局部刷新 2019-04-21
html中列表菜单加文字请选择,html中下拉菜单 2019-04-21
读书郎平板中android,读书郎学生平板电脑怎么用 使用方法详解【图文】 2019-04-21
html5 调用摄像头 支持IE,JS调用本地摄像头拍照(兼容各大浏览器及IE8+) 2019-04-21
rust和gta5哪个吃配置_盘点4款Steam“自由度”很高的游戏,GTA5众所周知,目前最热门... 2019-04-21
es审计日志_elasticsearch 事务日志translog 2019-04-21
dw1510_超低温种子储存柜 2019-04-21
文件未找到mathpage.wll_解决MathPage.wll文件找不到的问题(找了好久的良心之作)... 2019-04-21
广州刷脸支付骗局_刷脸支付是骗局?那可能你还不了解刷脸支付 2019-04-21