Jquery+css实现动态显示百分比的进展条资源-CSDN文库

共2个文件

js：1个

html：1个

Jquery

5星 · 超过95%的资源需积分: 11 50 浏览量 2010-08-31 19:21:14 上传评论收藏 17KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Jquery+css实现动态显示百分比的进展条.rar （2个子文件）

jquery.min.js 54KB

test.html 5KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loading Status Bar</title> <meta name="robots" content="noindex,follow" /> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> .out {width:300px;height:20px;background:#CFCFCF;padding:2px;position:fixed;} .in {width:1px;height:20px;background:url("jindu.jpg") repeat-x;font:10px/20px Arial} .out1 {width:1000px;height:20px;background:lightblue;padding:5px;position:fixed;} .in1 {width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <noscript>浏览器拦截了Javascript</noscript> <table width="100%"> <tr style="height:30px;"><td align="left" valign="middle"> <div style="background-color:white;width:600px;" id="background1"><div id="loading1" style="background:white;width:1px;"></div></div><span style="padding-left:140px;color:#C82A14;font-style:italic;font-size:25px;font-weight:bolder;" id="counter1">1</span> </td><tr> <tr style="height:30px;"><td align="left" valign="middle"> <div id="background2" class="out"><div id="loading2" class="in"></div></div><span style="padding-left:320px;color:#C82A14;font-style:italic;font-size:25px;font-weight:bolder;" id="counter2">1</span> </td><tr> <tr style="height:30px;"><td align="left" valign="middle"> <div id="background3" class="out"><div id="loading3" class="in"></div></div><span style="padding-left:320px;color:#C82A14;font-style:italic;font-size:25px;font-weight:bolder;" id="counter3">1</span> </td><tr> <tr style="height:30px;"><td align="left" valign="middle"> <div id="background4" class="out"><div id="loading4" class="in"></div></div><span style="padding-left:320px;color:#C82A14;font-style:italic;font-size:25px;font-weight:bolder;" id="counter4">1</span> </td><tr> <tr style="height:30px;"><td align="left" valign="middle"> <div id="background5" class="out"><div id="loading5" class="in"></div></div><span style="padding-left:320px;color:#C82A14;font-style:italic;font-size:25px;font-weight:bolder;" id="counter5">1</span> </td><tr> <tr style="height:30px;"><td align="center" valign="middle"> <input type="button" value="回收" onclick="test()"/><input type="button" value="报仇" onclick="test1()"/> </td><tr> </table> <script type="text/javascript"> //var i=90; //$("#loading1").animate( { width: "40%"}, { queue: false, duration: 5000 } ) // .animate( { fontSize: '1em' } , 1000 ); // $("#loading2").animate( { width: i+"%"},1000 ) // .animate( { fontSize: '1.1em' } , 1000 ); // $("#loading3").animate( { width: "80%"},1000 ).show(5000); //$("#loading4").animate( { width: "90%"},1000 ) // .animate( { fontSize: '1.3em' } , 1000 ); //setTimeout(function(){$("#f").hide(2500)},1000); </script> </body> <script type="text/javascript"> //$("#loading5").text(1+"%"); //setTimeout(function(){$("#loading5").animate({width:"100%"})},1000); //$("#loading5").text(90+"%"); </script> <script type="text/javascript"> function myJDT(count,time,out_bg,divName,spanName){ var out = $("#"+out_bg).width(); for(var i=2;i<=count;i++){ $("#"+spanName).animate({opacity:'1'}, time/count, function () { var w = $("#"+divName).width(); w = (w*25/out).toFixed(1); document.getElementById(spanName).innerHTML = w; }); } $("#"+divName).animate( { width: count+"%"}, { queue: false, duration: time } ); } function myJDTAll(count,time,out_bg,divName,spanName){ var out = $("#"+out_bg).width(); for(var i=count;i>1;i--){ $("#"+spanName).animate({opacity:'1'}, time/count, function () { var w = $("#"+divName).width(); w = (w*100/out).toFixed(1); document.getElementById(spanName).innerHTML = w; }); } $("#"+divName).animate( { width: count+"%"}, { queue: false, duration: time } ); } function test(){ myJDTAll(1,2600,"background1","loading1","counter1"); myJDT(1,600,"background2","loading2","counter2"); myJDT(1,1200,"background3","loading3","counter3"); myJDT(1,2400,"background4","loading4","counter4"); myJDT(1,1800,"background5","loading5","counter5"); } function test1(){ myJDTAll(40,2600,"background1","loading1","counter1"); myJDT(30,1600,"background2","loading2","counter2"); myJDT(20,1200,"background3","loading3","counter3"); myJDT(10,600,"background4","loading4","counter4"); myJDT(80,2600,"background5","loading5","counter5"); } setTimeout(function(){ myJDTAll(55,2600,"background1","loading1","counter1"); myJDT(25,600,"background2","loading2","counter2"); myJDT(44,1200,"background3","loading3","counter3"); myJDT(84,2400,"background4","loading4","counter4"); myJDT(66,1800,"background5","loading5","counter5"); },500); setTimeout(function(){test()},4000); setTimeout(function(){test1()},7000); </script> </body> </html>

评论收藏

内容反馈