jquery,模拟,进度条本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。具体如下： <!doctype html><html><head><meta charset="utf-8"><title>js模拟进度条练习</title><script type='text/javascript' src="http://xiazai.wanshiok.com/201508/yuanma/jquery-1.8.0.min.js"></script><script type='text/javascript' src='http://xiazai.wanshiok.com/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">http://www.wanshiok.com</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程序设计有所帮助。
jquery,模拟,进度条
|
