jquery 简单的进度条实现代码

秦烩胞弟

秦烩胞弟

2016-02-19 13:33

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的jquery 简单的进度条实现代码,希望大家看完后能赶快学习起来。

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

效果图

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

需要用到的图片:

背景图片:

进度显示图片:

网页结构:

代码如下:


div
div/div
divdiv/div/div
/div

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代码:
代码

代码如下:


script type="text/javascript" src="jquery-1.3.2.js"/script
script type="text/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 = 100) {
setTimeout("doProgress()", 100);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
/script

展开更多 50%)
分享

猜你喜欢

jquery 简单的进度条实现代码

Web开发
jquery 简单的进度条实现代码

jQuery 页面载入进度条实现代码

Web开发
jQuery 页面载入进度条实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX 进度条实现代码

Web开发
AJAX 进度条实现代码

IOS实现简单的进度条功能

编程语言 网络编程
IOS实现简单的进度条功能

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS简单的进度条

Web开发
CSS简单的进度条

jquery 简单导航实现代码

Web开发
jquery 简单导航实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

基于jQuery的消息提示插件之旅 DivAlert(三)

基于jQuery的消息提示插件之旅 DivAlert(三)

如何使用命令进行Mac和Linux之间的文件传输

如何使用命令进行Mac和Linux之间的文件传输
下拉加载更多内容 ↓