js组织架构图

来源：互联网发布：微信h5软件编辑：程序博客网时间：2024/04/30 07:00
<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>
0 0