进度条编写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style type="text/css">
			#my-progress {position: relative;top: 0;left: 0;z-index: 1000;margin:100px 0px 20px;}
			.progress-ui-line{width: 100%;height: 4px;background: red;position: absolute;top: 42%;left: 0;}
			.progress-ui-line-post{width: auto;height: 4px;position: absolute;top: 42%;left: 0;background: green;}
			.progress-ui,.progress-ui li,.progress-ui p,.progress-ui span,.progress-ui h2{list-style: none;padding: 0;margin: 0;list-style-type: none;}
			.progress-ui{width: 100%;height: auto;}
			.progress-ui:after{clear: both;content: '';display: block;}
			.progress-ui>li{float: left;}
			.progress-ui li{text-align: center;position: relative;z-index: 1001;}
			.hover-ui{border: 2px solid red;position: absolute;z-index: 1002;top: -92px;left: 50%;padding: 10px;background: white;text-align: left;}
			.hover-ui:after{width: 0px;height: 0px;content: '';display: inline-block;position: absolute;bottom: -20px;left: 50%;margin-left: -10px;
			border-width: 10px;border-style: solid;border-color: red transparent transparent transparent;}
			.spot-ui{width: 14px;height: 14px;border-radius: 50%;background: red;display: inline-block;}
			.hover-ui{display: none;}
			.actBb{background: green;}
			.disYes{display: block;}
		</style>
	</head>
	<body>
		<div id="my-progress">
		</div>
	</body>
	<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
	<script type="text/javascript">
		;+function($,window,document,undefind){
			$.fn.myProgress=function(obj){
				var su=obj.success, o=obj.name,s=obj.status,t=obj.timer,le=obj.name.length,m=obj.manager,j=obj.job,p=obj.phone,ls,w,$d="";
				$d +='<div class="progress-ui-line"></div><div class="progress-ui-line-post"></div><ul class="progress-ui">',
				$.each(o,function(i,item) {
					$d += '<li><div><h2>'+o[i]+'</h2><span class="spot-ui"></span><p>'+(s[i]?s[i]:'')+'</p><p>'+(t[i]?t[i]:'')+'</p></div>'+
					'<div class="hover-ui"><p>部分：'+(m[i]?m[i]:'')+'</p><p>职位：'+(j[i]?j[i]:'')+'</p><p>电话：'+(p[i]?p[i]:'')+'</p></div></li>';
				}),$d+='</ul>';
				$(this).append($d);ls =$('.progress-ui>li').length;
				for(var j=0;j<su;j++){$('.spot-ui').eq(j).addClass('actBb');}
		      	if(su>0)$('.progress-ui-line-post').width(100/ls*su+'%');
				$('.progress-ui>li').css('width',100/ls+'%')
		      	$('.progress-ui li').hover(function(){
		      		w= ($(this).find('.hover-ui').width()+24)/2;
		      		$(this).find('.hover-ui').toggleClass('disYes').css('margin-left',-w);
		      	})
			}
		}(jQuery,window,document)
	</script>
	<script type="text/javascript">
		$(function(){
			var postObj={
				'success':1,
				'name':['老大','老二','老三','老四'],
				'status':['通过','未通过'],
				'timer':['2018-05-24'],
				'manager':['总经办','销售部','财务'],
				'job':['老板','经理','员工'],
				'phone':['13455555555','13466666666','13477777777'],
			}
			$('#my-progress').myProgress(postObj);
	    })
	</script>
</html>
效果
写得比较粗糙，要用自己按照自己的需求细化一下就行了。
猜你喜欢
