javascript 进度条的几种方法

网络编程 2024/9/28 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

我们先看看最终效果：

第一步，基本
构建基本的代码，看效果演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>制作进度条的两种方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:1px solid #bbb; color:#222; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0; } </style> </head> <body> <h1>1，构建基本的HTML结构和CSS样式</h1> 0%的状态： 50%的状态： 80%的状态： 100%的状态：这步非常简单，相信大家都能看明白。 </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
第二步，给进度条增加文字显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>制作进度条的两种方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0; } /*绝对定位*/ .progressbar_2{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; text-align:center; position:relative; } .progressbar_2 .bar { background-color:#6CAF00; height:16px; width:0; position:absolute; left:0; top:0; } .progressbar_2 .text { height:16px; position:absolute; left:0; top:0; width:100%; line-height:16px; } /*绝对定位 + z-index */ .progressbar_3{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; text-align:center; position:relative; } .progressbar_3 .bar { background-color:#6CAF00; height:16px; width:0; position:absolute; left:0; top:0; z-index:10; } .progressbar_3 .text { height:16px; position:absolute; left:0; top:0; width:100%; line-height:16px; z-index:100; } </style> </head> <body> <h1>2，给进度条增加文字显示</h1> 一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。接下来，我们在进度条元素内增加一个显示文字的div。很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子： 50% 那么有什么办法使得文字和绿色进度条同时显示在一起呢？估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。看下面的例子： 50% 这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子： 50% 80% 100% 这是第一种方式，也是目前最为流行的制作进度条的方式。他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。 </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
他的原理就是采用相对定位和绝对定位，然后通过背景不同来控制进度。接下来我们看第二种方式制作进度条。
第三步，制作进度条的第二种方式---直接使用图片+背景图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*不带文字*/ .progress{ border:0; width: 152px; height: 18px; background:url(img/progress.gif) no-repeat -100px 50%; } /*带文字显示*/ .progressbar_3{ width:152px; position:relative; height:18px; text-align:center; position:relative; color:#222; } .progressbar_3 .text{ width:152px; position:absolute; left:0; top:0; height:18px; line-height:18px; z-index:100; } .progressbar_3 .progress{ width:152px; position:absolute; left:0; top:0; height:18px; z-index:10; } </style> </head> <body> <h1>3，制作进度条的第二种方式---直接使用图片+背景图片</h1> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。对，就是使用绝对定位+相对定位来控制。 0% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 20% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 50% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 80% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 100% <a href="javascript:;" onclick="showimg('img/bg.gif');"><img src="img/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> 这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。总的来说，这应该算一个技巧，在实际项目中，也是能使用的。 <p>Dev By jb51.net</p> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
这种方式的原理就是利用一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性来显示不同的部分。
当然这种方式对图片有点要求。你仔细一点就会发现，宽度是img的2倍。
另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。例子中background-position是用的px值，实际可以采用 % 来控制更精确，比如: background-position:80% 50%;等。
总的来说，这应该算一个技巧，在实际项目中，也是能使用的。

第四步，应用
最后我们看一个简单的应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*不带文字*/ .progress{ border:0; width: 152px; height: 18px; background:url(img/progress.gif) no-repeat -100px 50%; } /*带文字显示*/ .progressbar_3{ width:152px; position:relative; height:18px; text-align:center; position:relative; color:#222; } .progressbar_3 .text{ width:152px; position:absolute; left:0; top:0; height:18px; line-height:18px; z-index:100; } .progressbar_3 .progress{ width:152px; position:absolute; left:0; top:0; height:18px; z-index:10; } </style> </head> <body> <h1>4，应用</h1> 0% <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/bg.gif');"><img src="/UploadFiles/2021-04-02/bg.gif" alt="javascript 进度条的几种方法" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <button id="addTo" >增加至50%</button> <button id="cutdown" >减少至20%</button> 我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。 <p>Dev By jb51.net</p> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
通过animate来控制图片的background-position来达到进度条效果。
当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。
文件打包下载

javascript,进度条

标签：

javascript,进度条

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“javascript 进度条的几种方法”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

javascript 进度条的几种方法

javascript,进度条

Jquery中的offset()和position()深入剖析

JS 文字符串转换unicode编码函数

评论“javascript 进度条的几种方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

javascript 进度条的几种方法

javascript,进度条

Jquery中的offset()和position()深入剖析

JS 文字符串转换unicode编码函数

评论“javascript 进度条的几种方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存