js组织架构图

发布于 2019-09-26 作者 风铃 783次 浏览 版块 前端

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js&#34;></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>
收藏
1回复
1楼•2020-07-28

你好,我完全按照上面的去做但是没有横向的线