jquery模拟进度条实现方法
更新时间：2015年08月03日 11:44:13 作者：孙银龙
这篇文章主要介绍了jquery模拟进度条的方法,实例分析了jquery操作页面元素样式实现页面动态效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js模拟进度条练习</title>
<script type='text/javascript' src="http://xiazai.jb51.net/201508/yuanma/jquery-1.8.0.min.js"></script>
<script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jquery.artDialog.js?skin=default'></script>
<style>
body{ font-size:12px}
.aui_nw, .aui_ne, .aui_sw, .aui_se { height: 1px; width: 1px; }
.aui_outer, .aui_inner { border: 0; }
.aui_state_lock .aui_border { box-shadow: 0 0 10px rgba(0, 0, 0, .8); }
</style>
</head>
<body>
<button id="starLoading">显示进度条</button>
<div id="msgHtml">https://www.jb51.net</div>
</body>
</html>
<script>
(function(w){
var _html='<div style="line-height: 30px;text-align: center;">正在为您载入数据，请稍后……</div><div id="jsLoadOuter" style="width:250px;height:8px;border:#6BAAC9 solid 1px; background:#C0EBFF; margin:0 auto;box-shadow: 0 0 3px #2E94BB;padding:1px"><div id="jsLoadInner" style="background:#54AEE0;height:100%;width:0"></div></div>';
var __g;
var _maxWidth=100;
var _nowWidth=0;
var _speed=30;
var _step=2;
var __time;
progress={
render:function(fn){
fn&&fn(_html);
_nowWidth=0;
__g=document.getElementById('jsLoadInner');
this.fx();
},
complete:function(fn){
clearTimeout(__time);
progress.completeFn=fn;
this.setOver();
},
setOver:function(){
var _stepa=_step*1.5;
if(_nowWidth<_maxWidth){
_nowWidth=_nowWidth-0+_stepa;
parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
__g.style.width=''+_nowWidth+'%';
_speed=(_maxWidth-_nowWidth)/1000;
__time=setTimeout('progress.setOver()',_speed) ;
}else{
clearTimeout(__time);
progress.completeFn&&progress.completeFn();
};
},
fx:function(){
var _stepa=_step;
if(_nowWidth<_maxWidth-5){
_stepa=_nowWidth>_maxWidth*0.6?(_stepa*0.02):_stepa;
_nowWidth=_nowWidth-0+_stepa;
parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
__g.style.width=''+_nowWidth+'%';
__time=setTimeout('progress.fx()',_speed);
}else{
clearTimeout(__time);
};
}
}
w.progress=progress;
})(window)
//
$(function(){
showLoading();
$('body')
.on('click','#starLoading',function(){
showLoading();
})
})
function showLoading(){
//开始显示进度条
progress.render(function(html){
art.dialog({id:"jsLoadingDialog",title:"\u6b63\u5728\u52a0\u8f7d\u4e2d\u2026\u2026",cancel:!1,lock:!0,background:"#fff",fixed:!0,content:html});
});
//请求完成后完成进度条，，，模拟10秒后请求完成
setTimeout(function(){
progress.complete(function(html){
art.dialog.list['jsLoadingDialog']&&art.dialog.list['jsLoadingDialog'].close();
$('#msgHtml').html('进度条已走完');
});
},10000);
};
</script>
运行效果如下图所示：
希望本文所述对大家的jquery程序设计有所帮助。
相关文章
复制节点也是常用的DOM操作之一，例如很多购物网站的效果,本文将介绍jQuery移动和复制dom节点等实用DOM操作，有需的朋友可以参考下2012-12-12
javascript jQuery $.post $.ajax用法
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。2008-07-07
这篇文章主要介绍了jquery高级编程的最佳实践详解,学习JQ的朋友一定需要这个，参考下吧2014-03-03
本篇文章主要是对jquery中get,post和ajax方法的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
今天小编就为大家分享一篇关于JQuery实现ajax请求的示例和注意事项，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
这篇文章主要为大家详细介绍了jquery无缝图片轮播组件封装，支持自动轮播，手动轮播，无缝衔接，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要介绍了 jQuery自定义插件详解及实例代码的相关资料,需要的朋友可以参考下2016-12-12
这篇文章介绍了jQuery操作文本的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了jquery实现简单实用的弹出层效果代码,涉及jquery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
html方法当不传参数时用来获取元素的html内容2011-04-04
最新评论