Heim >Web-Frontend >js-Tutorial >jquery 简单的进度条实现代码_jquery

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

WBOY
WBOYOriginal
2016-05-16 18:32:43955Durchsuche

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

效果图

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代码:
代码
复制代码 代码如下:



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn