首页 / JQUERY / jquery模拟进度条实现方法
jquery模拟进度条实现方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery模拟进度条实现方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2617字,纯文字阅读大概需要4分钟。
内容图文
![jquery模拟进度条实现方法](/upload/InfoBanner/zyjiaocheng/357/e98cdff7751a4f439252541d174a10b9.jpg)
本文实例讲述了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">//www.gxlcms.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模拟进度条实现方法全部内容,希望文章能够帮你解决jquery模拟进度条实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。