js组织架构图

最新推荐文章于 2024-05-26 09:57:59 发布

_平凡的自我_

最新推荐文章于 2024-05-26 09:57:59 发布

阅读量4.5k

点赞数

分类专栏： html js 文章标签： html javascript 组织架构

本文链接：https://blog.csdn.net/zhh123sy001/article/details/53392171

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
* {
	font-size: 12px;
}

.chartDiv {
	width: 900px;
}

.item {
	width: 90px;
	height: 52px;
	margin: 0 auto;
	cursor: pointer;
}

.itemTop {
	height: 26px;
	line-height: 26px;
	background: #f06666;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	text-align: center;
	color: #fff;
}

.itemBot {
	height: 26px;
	line-height: 26px;
	background: #d9d8d8;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
}

.org2 .itemTop {
	background: #347dea;
}

.org3 .itemTop {
	background: #8ad57d;
}

.org4 .itemTop {
	background: #9b75f8;
}

.itemGroup .item {
	float: left;
	margin-left: 75px;
}

.itemGroup2 .item {
	margin-left: 32px;
}

.itemGroup {
	margin-top: 40px;
	position: relative;
}

.itemGroupFloat {
	float: left;
	margin-top: -52px;
}

.clear {
	clear: both;
}

.linex {
	position: absolute;
	height: 1px;
	background: #6a9bf2;
	top: -20px;
}
.liney {
    width: 1px;
    height: 20px;
    background: #6a9bf2;
    margin: 0 auto;
    margin-top: -20px;
}
.liney0{
	margin-top: 0px;
}
.liney2 {
    height: 40px;
    margin-top: -40px;
}
.liney3 {
    height: 110px;
    margin-top: -110px;
}
.liney4 {
    height: 40px;
    margin-top: -40px;
}
.liney5 {
    height: 224px;
    margin-top: -224px;
}
.borderDiv {
    border: 2px dashed #002bff;
    border-radius: 8px;
    width: 90px;
    height: 52px;
    position: absolute;
    display: none;
    z-index: -1;
}
</style>
</head>
<body>
	<div class="mainDiv">
		<div class="chartDiv">
			<div class="item">
				<div class="itemTop">集团总部</div>
				<div class="itemBot">总裁</div>
			</div>
			<div class="itemGroup">
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup">
				<div class="item org2" style="margin-left: 155px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3" style="margin-left: 410px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org2">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org2">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org2">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup itemGroup2 itemGroupFloat"
				style="margin-left: 364px;">
				<div class="item org3" style="margin-left: 168px;">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3">
					<div class="liney liney2"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org2">
					<div class="liney liney4"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org4" style="margin-left: 90px;">
					<div class="liney liney3"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
					<div class="liney liney0"></div>
				</div>
				<div class="item" style="margin-left: 102px;">
					<div class="liney liney5"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org3" style="margin-left: 162px;">
					<div class="liney liney4"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="itemGroup itemGroup2">
				<div class="item org4" style="margin-left: 154px;">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="item org4" style="/* margin-left: 90px; */">
					<div class="liney"></div>
					<div class="itemTop">集团总部</div>
					<div class="itemBot">总裁</div>
				</div>
				<div class="clear"></div>
				<div class="linex"></div>
			</div>
			<div class="borderDiv"></div>
		</div>
	</div>

	<script type="text/javascript">
		jQuery(function() {
			//定位横向的线
			jQuery(".linex").each(function() {
				var obj = jQuery(this).parent();
				var left = obj.find(".item:first").offset().left + 45;
				var width = obj.find(".item:last").offset().left + 45 - left;
				if (obj.hasClass("itemGroupFloat")) {
					left = left - obj.offset().left;
				}
				jQuery(this).css({
					"margin-left" : left + "px",
					"width" : width + "px"
				});
			});
			
			//初始化选择后的框
			jQuery(".item").click(function(event){
				var obj = jQuery(this).offset();
				var l = obj.left - 2;
				var t = obj.top - 2;
				jQuery(".borderDiv").css({"left":l+"px","top":t+"px"}).show();
				event.stopPropagation();
				return false;
			});
			
			jQuery(".chartDiv").click(function(){
				jQuery(".borderDiv").hide();
			});
		});
	</script>
</body>
</html>