下载jqueryprogressbar.js
源码如下:
(function($) {
//Main Method
$.fn.reportprogress = function(val,maxVal) {
var max=100;
if(maxVal)
max=maxVal;
return this.each(
function(){
var div=$(this);
var innerdiv=div.find(".progress");
if(innerdiv.length!=1){
innerdiv=$("<div class='progress'></div>");
div.append("<div class='text'> </div>");
$("<span class='text'> </span>").css("width",div.width()).appendTo(innerdiv);
div.append(innerdiv);
}
var width=Math.round(val/max*100);
innerdiv.css("width",width+"%");
div.find(".text").html(width+" %");
}
);
};
})(jQuery);
页面代码:
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT src="jqueryprogressbar.js" type="text/javascript"></SCRIPT>
<SCRIPT type=text/javascript>
var pct=0;
var handle=0;
function update(){
$("#progressbar").reportprogress(++pct);
if(pct==100){ //设定总长度值
clearInterval(handle);
$("#run").val("start");
pct=0;
}
}
jQuery(function($){
$("#run").click(
function(){
if(this.value=="start"){
handle=setInterval("update()",100); //设定增长的时间
this.value="stop";
}else{
clearInterval(handle);
this.value="start";
}
}
);
$("#reset").click(function(){
pct=0;
$("#progressbar").reportprogress(0);
});
});
</SCRIPT>
<STYLE>
#progressbar {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
WIDTH: 200px;
COLOR: black;
BORDER-BOTTOM: black 1px solid;
POSITION: relative; HEIGHT: 20px
}
#progressbar DIV.progress {
OVERFLOW: hidden;
WIDTH: 0px;
POSITION: absolute;
HEIGHT: 100%;
BACKGROUND-COLOR: blue;
}
#progressbar DIV.progress .text {
COLOR: white;
POSITION: absolute;
TEXT-ALIGN: center; FONT-SIZE:larger;
}
#progressbar DIV.text {
WIDTH: 100%;
POSITION: absolute;
HEIGHT: 100%;
TEXT-ALIGN: center;
FONT-SIZE:larger;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="progressbar">
</DIV>
<INPUT id="run" type="button" value="start"> <INPUT id="reset" type="button" value="reset">
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
分享到:
相关推荐
jQuery进度条插件设置百分比进度条样式代码 jQuery进度条插件设置百分比进度条样式代码
jQuery 进度条
spin 进度条 加载GIF jQuery进度条 loading
jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条...
jquery进度条投票打分插件多个带动画进度条投票打分
jQuery进度条插件制作多种彩色的动画上传进度条效果代码
jQuery进度条插件,jQuery进度条插件,jQuery进度条插件
jQuery进度条式大幅幻灯片左右切换特效代码,您看到上图中图片底部的红色长条了吗?用鼠标点击下边的“条”就可以切换了,貌似不支持IE8及以下浏览器。jQuery Image Scale Carousel是一款基于jQuery的网站幻灯片左右...
jQuery进度条插件彩色样式代码是一款可设置百分比,颜色,高度,长度,圆形形状等。
jquery进度条载入特效
非常实用的jquery进度条,可以以任意数值为单位左右拉动保存到表单属性中,进而可以保存到表字段中,相对于手动输入更为直观,页面更加好看
jquery进度条幻灯片代码 jquery进度条幻灯片代码 jquery进度条幻灯片代码
jQuery模拟页面加载进度条
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传
经过改编后的Jquery进度条 希望能得到大家的支持~
NULL 博文链接:https://zhibin07.iteye.com/blog/1468688
JQuery 进度条 JQuery 进度条 JQuery 进度条
jquery 进度条插件progressbar 彩色可自定义进度条图片 动态变换进度效果