js进度条简单模拟
基于jquery自己写了个进度条，可以进行简单配置。代码如下：
window.ui=window.ui||{}; window.ui.progressbar=window.ui.progressbar||{}; window.ui.progressbar={ progressArea:null,// 页面中的div id isInited:false, // 初始化标记 bgImageUrl:null,// 背景图片 // 进度条初始化 initProgressBar:function (progressArea){ this.progressArea=progressArea; // 顶层div样式 var ui_progressbar_container_css={ "color": "#784848", "width": "30%", "height": "32px", "line-height": "32px", "background-color":"#bdb76b", "position": "absolute", "left":"35%", "top":"50%", "z-index":"1004" }; // 滚动div样式 var ui_progressbar_scroll_css={ "width": "0px", "height": "32px", "background": "#87ceeb", "position": "absolute", "background-image":"url("+this.bgImageUrl+")", }; // 文字显示样式 var ui_progressbar_display_text_css={ "width": "100%", "height": "32px", "line-height": "32px", "text-align": "center", "position": "absolute" }; // 构造进度条的div $("<div id='ui_progressbar_container'/>").css(ui_progressbar_container_css).appendTo($("#"+this.progressArea)); $("<div id='ui_progressbar_scroll'/>").css(ui_progressbar_scroll_css).appendTo($("#ui_progressbar_container")); $("<div id='ui_progressbar_display_text'/>").css(ui_progressbar_display_text_css).appendTo($("#ui_progressbar_container")); }, loadingInterval:null,// 运行定时器 // 进度条运行方法 loading:function() { var currentPoint = 0; var percentage = null; var that=this; var hasSlowDwon=false; var fun = function() { if (currentPoint > 98) { clearInterval(that.loadingInterval); return; } if (currentPoint > 80) { currentPoint += 1; percentage = currentPoint; if(!hasSlowDwon){ clearInterval(that.loadingInterval); that.loadingInterval = setInterval(fun, 1000); hasSlowDwon=true; } } else { currentPoint += 1; percentage = currentPoint; } that.changeProgressValue(percentage); }; this.loadingInterval = setInterval(fun, 50); }, // 进度条值改变方法 changeProgressValue:function(percentage){ $('#ui_progressbar_scroll').animate( { width : percentage + '%' }, 0, function() { $('#ui_progressbar_display_text').text("Progress..." + percentage + "%"); }); }, // 进度条开始方法 startProgress:function(progressArea){ if(!this.isInited){ this.initProgressBar(progressArea); this.isInited=true; } this.changeProgressValue(0); this.loading(); $("#"+this.progressArea).show(); }, // 进度条完成方法 completeProgress:function(){ clearInterval(this.loadingInterval); this.changeProgressValue(100); $("#"+this.progressArea).hide(); } }; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>jQuery模拟页面加载进度条</title></head> <body><div id="progressArea"></div><script type="text/javascript" src="../jslib/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="jslib/customer.ui.simple.progressbar.js"></script> <script> window.ui.progressbar.bgImageUrl="logo000746.gif";// 设置背景图片 window.ui.progressbar.startProgress("progressArea"); setTimeout("window.ui.progressbar.completeProgress()",2000);// 结束进度条</script> </body> </html> 1 楼 Roshan2 2012-10-26 永恒的一哥！！！