<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jsProgressBarHandler Demo | Javascript Progress/Percentage Bar</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- jsProgressBarHandler prerequisites : prototype.js -->
<script type="text/javascript" src="js/prototype/prototype.js"></script>
<!-- jsProgressBarHandler core -->
<script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>
<style type = "text/css">
/* General Links */
a:link { text-decoration : none; color : #3366cc; border: 0px;}
a:active { text-decoration : underline; color : #3366cc; border: 0px;}
a:visited { text-decoration : none; color : #3366cc; border: 0px;}
a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}
img { padding: 0px; margin: 0px; border: none;}
body {
margin : 0 auto;
width:100%;
font-family: 'Verdana';
color: #40454b;
font-size: 12px;
text-align:center;
}
.content {
margin:20px;
line-height:20px;
}
body h1 {
font-size:14px;
font-weight:bold;
color:#CC0000;
padding:5px;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
}
body h2 {
font-size:14px;
font-weight:bold;
color:#CC0000;
padding:5px;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
}
#demo {
margin : 0 auto;
width:100%;
}
#demo .extra {
padding-left:30px;
}
#demo .options {
padding-left:10px;
}
#demo .getOption {
padding-left:10px;
padding-right:20px;
}
</style>
</head>
<body>
<div style="width:540px;margin : 0 auto; text-align:left;" >
<p style="background: #ffff99; text-align: center; color: #000; border: 1px solid #ff9900; padding: 5px; font-size: 12px; font-weight: bold;">Looking for the <a href="http://www.bram.us/demo/projects/jsprogressbarhandler/ajaxprogressbar.html" title="">ajax demo</a>?</p>
<h1>jsProgressBarHandler 0.3.3 | Javascript Progress/Percentage Bar</h1>
<div id="demo">
<h2>1. Automatically created Progress Bars (Default Styling)</h2>
<span style="color:#006600;font-weight:bold;">Program Efficiency</span> <br/>
<span class="progressBar" id="element1">15%</span>
<span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Empty Bar'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','+5');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Add 5%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Minus 5%'" /></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','15');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Set 15%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','100');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Fill 100%'" /></a></span>
<span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element1'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Get Current %'"/></a></span>
<span id="Text1" style="font-weight:bold">« Select Options</span>
<br/><br/>
<span style="color:#006600;font-weight:bold;">Website Projects Progress</span> <br/>
<span class="progressBar" id="element2">35%</span>
<span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Empty Bar'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Add 10%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Minus 5%'" /></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','35');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Set 35%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','80');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Fill 80%'" /></a></span>
<span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element2'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Get Current %'"/></a></span>
<span id="Text2" style="font-weight:bold">« Select Options</span>
<br/><br/>
<span style="color:#006600;font-weight:bold;">Weight Loss Progress</span> <br/>
<span class="progressBar" id="element3">50%</span>
<span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Empty Bar'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','+25');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Add 25%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','-15');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Minus 15%'" /></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','50');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Set 50%'"/></a></span>
<span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','65');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Fill 65%'" /></a></span>
<span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element3'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseov
js实现的非常好看的进度条
5星 · 超过95%的资源 需积分: 45 129 浏览量
2013-12-04
09:08:03
上传
评论
收藏 101KB RAR 举报 
.rar （18个子文件） 
进度条 
1275612707.rar 57KB images icons 
add.gif 990B set.gif 1006B get.gif 991B minus.gif 991B empty.gif 963B fill.gif 1003B bramus 
percentImage_back2.png 3KB percentImage.png 1023B percentImage_back3.png 3KB custom1_bar.gif 2KB percentImage_back1.png 3KB custom1_box.gif 110B percentImage_back.png 1KB percentImage_back4.png 3KB
index.html 16KB js prototype 
prototype.js 123KB bramus jsProgressBarHandler.js 16KB资源评论
ynzyloo12016-03-10没有用上，不过仍然谢谢！- lxpengking2014-01-13还不错，可以直接拿来用
- joel2_02017-03-14非常好 很酷炫。
kuihuaduoduo123
- 粉丝: 1
- 资源: 2
