javascript 进度条的几种方法 2008年11月30日 作者: 我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 1,构建基本的HTML结构和CSS样式 0%的状态: 50%的状态: 80%的状态: 100%的状态: 这步非常简单,相信大家都能看明白。 第二步,给进度条增加文字显示 制作进度条的两种方法 2,给进度条增加文字显示 一个进度条需要包含对应的进度文字显示,本例中,我希望文字显示在进度条的中间。 接下来,我们在进度条元素内增加一个显示 文字的div。 很显然,直接添加div后,div会占据原先绿色进度条的位置。看下面例子: 50% 那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢? 估计你也想到了,那就是绝对定位。通过对父元素添加相对定位,然后给子元素添加绝对定位,设置子元素的左边距和上边距都为0。 看下面的例子: 50% 这时你会发现文字被遮盖了,相信你第一时间就会想到用 z-index 去设置他们的层级关系。 对,我也选择的是它。通过给他们设置不同的z-index值来确定层级关系,值越大越显示在上面。看下面例子: 50% 80% 100% 这是第一种方式,也是目前最为流行的 制作进度条的方式。 他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。 他的原理就是采用 相对定位和绝对定位,然后通过背景不同来控制进度。 接下来我们看第二种方式制作进度条。 第三步,制作进度条的第二种方式---直接使用图片+背景图片 3,制作进度条的第二种方式---直接使用图片+背景图片 如果你想在上面进度条上添加进度显示的文字,你应该知道怎么办了(如果你仔细阅读过前面的例子的话)。 对,就是使用绝对定位+相对定位来控制。 0% 20% 50% 80% 100% 这种方式的原理就是 利用 一张img图片,然后给img图片又设置背景图,通过背景图的background position 属性 来显示不同的部分。 当然这种方式 对图片有点要求 。你仔细一点就会发现,宽度是img的2倍。 另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。 总的来说,这应该算一个技巧,在实际项目中,也是能使用的。 Dev By laike.net 这种方式的原理就是 利用 一张img图片,然后给img图片又设置背景图,通过背景图的background position 属性 来显示不同的部分。 当然这种方式 对图片有点要求 。你仔细一点就会发现,宽度是img的2倍。 另外图片必须是gif透明的,也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值,实际可以采用 % 来控制 更精确, 比如: background-position:80% 50%;等。 总的来说,这应该算一个技巧,在实际项目中,也是能使用的。 第四步,应用 最后我们看一个简单的应用: 4,应用 0% 增加至50% 减少至20% 我使用的是第二种方式来做控制,通过animate来控制图片的background-position来达到进度条效果。 当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width 属性。 Dev By laike.net 通过animate来控制图片的background-position来达到进度条效果。 当然你也可以使用第一种方式做,第一种方式需要改变的是进度条的 width 属性。 文件打包下载 相关链接 discuz中用到的javascript函数解析来自ImageSee官方 JavaScript图片浏览器用javascript实现检测指定目录是否存在的方法站长必须要知道的javascript广告代码jser必看的破解javascript各种加密的反向思维方法WPF实现进度条实时更新效果WPF实现转圈进度条效果ASP.NET实现进度条效果JavaScript操作表单_动力节点Java学院整理javascript请求servlet实现ajax示例(分享) 编程pythonJavaPHPASPASP.NETvbsPerlDOS/BATHTARubyAutoitPowerShellLinux shellLuaGolangHTCVBAAJAXCSS/HTMLFlexXML/RSS正则表达式ColdFusionSeraphzoneErlangJsp相关设计PhotoshopPS相片处理PS抠图PS文字特效PS入门PS调色PS标志PS按钮制作FireworksCorelDrawIllustratorPainterIndesignFreehand平面相关FlashFlash基础ActionScriptFlash技巧Flash实例3Dmax教程3Dmax基础3Dmax渲染3Dmax建模3Dmax实例3Dmax贴图AutoCADMaya开发语言架构AppleAndroid前端开源工具CMSphpwindecmsdedecmsWordPressPHPCMSdiscuzUCenter HomeDrupalECShop网页FrontpageHTML5XMLDreamweaver技巧WEB标准CSS教程html教程服务器LinuxwindowsFTPTomcatNginxDockerVMwareHyper-VOpenStackXenServerVirtualBoxKVM运维数据库MysqlMsSqlMariadbOracleSQLitePostgreSQLMongoDBAccessRedisDB2网络路由器交换机组网技术布线网络协议网络其他相关硬件CPU主板内存显卡显示器鼠标键盘机箱电源散热器电脑组装智能电视盒子存储打印机综合软件U盘教程影音播放图形图像开发编程媒体工具磁盘光盘文件管理苹果教程安全相关网络通讯系统工具officeWordExcelPowerPointAccessOutlookWPSOffice相关电脑电脑知识故障问题系统RedHat/CentosUbuntu/DebianFedoraSolarisWindowsLinuxMAC(苹果)Bios系统安装注册表Unix/BSD系统进程系统相关华为鸿蒙系统麒麟系统红旗操作系统安全网站安全系统安全网络安全企业安全数据安全安全工具平板笔记本手机安卓苹果手机软件