Maison >interface Web >js tutoriel >jquery 简单的进度条实现代码_jquery

jquery 简单的进度条实现代码_jquery

WBOY
WBOYoriginal
2016-05-16 18:32:43955parcourir

其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。

效果图

jquery 简单的进度条实现代码_jquery

需要用到的图片:

背景图片:

jquery 简单的进度条实现代码_jquery

进度显示图片:

jquery 简单的进度条实现代码_jquery

网页结构:

复制代码 代码如下:






css代码:
代码
复制代码 代码如下:

#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(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;

JavaScript代码:
代码
复制代码 代码如下:



Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn