当前位置: 编程技术>jquery
jquery进度条简单示例
来源: 互联网 发布时间：2014-10-09
本文导语: 一个jquery进度条的实例代码 效果图： 需要用到的图片： 背景图片： 进度显示图片： 下面是正文，大家可以体会与纯js进度条有什么不同啦。 1，网页结构： 2，css样式代码 #center{ margin:50px auto; width:400px; } ...
一个jquery进度条的实例代码
效果图：
需要用到的图片：
背景图片：
进度显示图片：
下面是正文，大家可以体会与纯js进度条有什么不同啦。
1，网页结构：
2，css样式代码
#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(/tech-jquery/bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(/tech-jquery/pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(/tech-jquery/bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(/tech-jquery/pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;
3，javascript代码：
var progress_id = "loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("加载完毕！").fadeIn("slow");//加载完毕提示
return;
}
if (i
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
站内导航:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！