jquery 简单的进度条实现代码
作者:bea
其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。 效果图 需要用到的图片: 背景图片: 进度显示图片: 网页结构: 代码如下: <div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div> css代码:
其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。
效果图
需要用到的图片:
背景图片:
进度显示图片:
网页结构:
代码如下:
<div id="center">
<div id="message"></div>
<div id="loading"><div></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>
有用 | 无用
效果图
需要用到的图片:
背景图片:
进度显示图片:
网页结构:
代码如下:
<div id="center">
<div id="message"></div>
<div id="loading"><div></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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Jquery cookie操作代码
- javascript 解决表单仍然提交即使监听处理函数返回false
- jQuery第三课 修改元素属性及内容的代码
- jQuery 第二课 操作包装集元素代码
- jQuery入门第一课 jQuery选择符
- javascript 图片轮换显示效果代码
- 使用JavaScript switch case 另类写法
- 两个JavaScript jsFiddle JSBin在线调试器
- JS 日期操作代码,获取当前日期,加一天,减一天
- input的focus方法使用
- JavaScript prototype对象的属性说明
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
- JS在IE和FireFox之间常用函数的区别小结
- javascript offsetX与layerX区别
- jQuery 点击图片跳转上一张或下一张功能的实现代码
- javascript 图片上一张下一张链接效果代码
- JQuery Ajax 跨域访问的解决方案
- javascript 不用reverse实现字符串反转的代码
- ExtJS 学习专题(一) 如何应用ExtJS(附实例)