自定义进度条:

在上传附件时经常有需要用到进度条,而很多插件都是自带flash进度条,不好改又不好看,所以我们就希望能够自己书写进度条。

以下是给出了一个进度条例子;并给出了对jquery.uploadify.js进度条的修改方案。

自定义进度条测试代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
	</head>
	<body>
		<div style="height: 500px;width: 100%;"></div>
		<div id="progress" style="position: fixed;top:30%;left: 30%;width: 40%;border-radius:20px;background-color: #ccc;height: 26px;display: none;">
			<div id="myBar" style="border-radius:20px;background-color: #1e8ce8;height: 100%;width: 0;text-align: center;line-height: 26px;color: white;"></div>
		</div>
		<div style="height: 500px;width: 100%;"></div>
	</body>
</html>
<script>
	$(function(){
		var gress = 10;
		$("#progress").show();
		var a = setInterval(function(){
			gress++;
			console.info(gress);
			var percentage = gress +"%";
			$('#progress').find("#myBar").css({width:percentage}).html(percentage);
			if(gress == 100){
				clearInterval(a);
			}
		},300);
	});
</script>

进度条效果如下:


针对jquery.uploadify.js进度条的修改如下


progress即为上面案例中的div;我们把他隐藏到页面上即可。



作者:星辰 时间:2016-08-01 浏览 1011评论 0 赞 0砸 0 标签: jquery 前端
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款