<style type="text/css" media="screen"> #center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; color:#fff; text-align:center; font-family:Tahoma; font-size:18px; line-height:48px; } .map{ width:0px; height:48px; background:url(pro.png) no-repeat; } .text{ /*margin:50px auto; */ width:400px; color:#000; text-align:center; font-family:Tahoma; font-size:18px; line-height:48px; } </style> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> var i = 0; function doProgress() { if (i > 100) { $("#text").html("加载完毕！").fadeIn("slow");//加载完毕提示 return; } if (i <= 100) { $("#map").css("width", String(i) + "%"); //控制#loading div宽度 $("#text").html(String(i) + "%"); //显示百分比 setTimeout("doProgress()", 100); i++; } } $(document).ready(function() { doProgress(); }); </script> <div id="center"> <div align="center"> <span id="text" class="text"></span> </div> <div id="loading"> <div id="map" class="map"></div> </div> </div>
div 层叠：
1 <style type="text/css" media="screen"> 2 #center{ 3 margin:50px auto; 4 width:400px; 5 } 6 #loading{ 7 position:relative; 8 width:397px; 9 height:49px; 10 background:url(bak.png) no-repeat; 11 color:#fff; 12 text-align:center; 13 font-family:Tahoma; 14 font-size:18px; 15 line-height:48px; 16 } 17 /*#loading div{ 18 0px; 19 height:48px; 20 background:url(pro.png) no-repeat; 21 color:#fff; 22 text-align:center; 23 font-family:Tahoma; 24 font-size:18px; 25 line-height:48px; 26 } */ 27 28 .map{ 29 position:absolute; 30 width:0px; 31 height:48px; 32 background:url(pro.png) no-repeat; 33 /*color:#fff; 34 text-align:center; 35 font-family:Tahoma; 36 font-size:18px; 37 line-height:48px; */ 38 } 39 40 41 .text{ 42 /*margin:50px auto; */ 43 position:absolute; 44 width:400px; 45 color:#000; 46 text-align:center; 47 font-family:Tahoma; 48 font-size:18px; 49 line-height:48px; 50 51 } 52 53 #message{ 54 width:200px; 55 height:35px; 56 font-family:Tahoma; 57 font-size:12px; 58 background-color:#d8e7f0; 59 border:1px solid #187CBE; 60 display:none; 61 line-height:35px; 62 text-align:center; 63 margin-bottom:10px; 64 margin-left:50px; 65 } 66 67 </style> 68 69 70 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 71 <script type="text/javascript"> 72 var i = 0; 73 function doProgress() 74 { 75 if (i > 100) { 76 $("#text").html("加载完毕！").fadeIn("slow");//加载完毕提示 77 return; 78 } 79 if (i <= 100) { 80 81 $("#map").css("width", String(i) + "%"); //控制#loading div宽度 82 $("#text").html(String(i) + "%"); //显示百分比 83 setTimeout("doProgress()", 100); 84 i++; 85 86 } 87 } 88 89 90 $(document).ready(function() 91 { 92 doProgress(); 93 }); 94 </script> 95 96 97 <div id="center"> 98 99 100 101 <div id="loading" > 102 <div id="map" class="map"></div> 103 <div id="text" class="text"></div> 104 </div> 105 106 107 </div>
效果：
文件下载： https://files.cnblogs.com/files/hzijone/manu_processbar.zip