树状图

Posted 2020-11-20 ycxiaoyang

效果图：

css:

body,div,span,i,p{margin: 0;padding: 0;}
.box{width: 900px;height: 600px;margin: 100px auto;border: 1px solid #333;position: relative;overflow: hidden;}
.body{position: absolute;width: max-content;height: max-content;text-align: center;min-width: 100%;}
.rows{display: inline-block;font-size: 0;margin-left: 20px;vertical-align: top;}
.rows:first-child{margin-left: 0;}
.rows.block{display: block;margin-left: 0;margin-top: 50px;}
.item{width: 20px;padding: 5px;height: 80px;border: 1px solid #333;color: #333;font-size: 12px;display: inline-block;margin-left: 20px;position: relative;cursor: pointer;}
.item:first-child{margin-left: 0;}
.line_t,.line_b{position: absolute;width: 2px;height: 24px;background-color: #333;left: 50%;margin-left: -1px;}
.line_t{top:-25px;z-index: -1;}
.line_b{bottom:-25px;z-index: -1;}
.line_x{position: absolute;height: 2px;background-color: #333;bottom: -27px;z-index: -1;}
.cuser{position:fixed;padding: 6px;border: 1px solid #83b266;background-color: #fff; border-radius: 6px;}

 

js:

依赖JQ

var three = [
　　{
　　　　name: ‘顶层顶层顶‘,
　　　　child: [
　　　　　　{name: ‘两个‘, child: [ {name: ‘最小‘}, {name: ‘最小‘, child: [ {name: ‘最小‘}, {name: ‘最小‘}, {name: ‘最小‘} ]} ]},
　　　　　　{name: ‘无子‘},
　　　　　　{name: ‘三个‘, child: [ {name: ‘最小‘}, {name: ‘最小‘}, {name: ‘最小‘} ]},
　　　　]
　　},
　　{
　　　　name: ‘顶层‘,
　　　　child: [
　　　　　　{name: ‘两个‘, child: [ {name: ‘最小‘}, {name: ‘最小‘} ]},
　　　　　　{name: ‘无子‘},
　　　　　　{name: ‘三个‘, child: [ {name: ‘最小‘}, {name: ‘最小‘}, {name: ‘最小‘} ]},
　　　　]
　　},
]
function addThree(ags){
　　var str = ‘<div class="body"><div class="rows block">‘;
　　call(ags,false)
　　function call(arr,boo){
　　　　$.each(arr, function(k,v){
　　　　　　str += ‘<div class="rows"><div class="item"data-name="‘+v.name+‘"><span>‘+v.name+‘</span>‘+(boo?‘<i class="line_t"></i>‘:‘‘)+(v.child?‘<i class="line_b"></i><i class="line_x"></i>‘:‘‘)+‘</div>‘;
　　　　　　if(v.child){
　　　　　　　　str += ‘<div class="rows block">‘;
　　　　　　　　call(v.child,true);
　　　　　　　　str += ‘</div>‘
　　　　　　}
　　　　　　str += ‘</div>‘
　　　　})
　　};
　　str += ‘</div></div>‘;
　　$(‘body‘).append(str);
　　$(‘body‘).append(‘<div class="cuser" style="display:none"></div>‘)
　　$(‘.item‘).each(function(k,v){
　　　　var line = $(v).children(‘.line_x‘);
　　　　var child = $(v).parent().children(‘.rows.block‘).children(‘.rows‘);
　　　　if(child[0]){
　　　　　　line.width(child.eq(child.length-1).children(‘.item‘).offset().left - child.eq(0).children(‘.item‘).offset().left+2)
　　　　　　line.css({‘left‘: -($(v).offset().left - child.children(‘.item‘).offset().left - 14) + ‘px‘})
　　　　}
　　})
　　enter(‘.item‘)
　　function enter(clas){
　　　　$(clas).mousemove(function(e1){
　　　　　　var that = $(this);
　　　　　　var w2 = e1.pageX+20;
　　　　　　var h2 = e1.pageY;
　　　　　　$(‘.cuser‘).css({ ‘display‘:‘block‘, ‘left‘: w2-$(window).scrollLeft(), ‘top‘: h2-$(window).scrollTop()})
　　　　　　$(‘.cuser‘).html(‘<p>名称：‘+that.attr(‘data-name‘)+‘</p>‘)
　　　　})
　　　　$(clas).mouseout(function(e){
　　　　　　$(‘.cuser‘).css({‘display‘: ‘none‘})
　　　　})
　　};
};
addThree(three);