Home > Article > Web Front-end > Can css draw a tree diagram? _html/css_WEB-ITnose
Can css draw a tree diagram? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:452163browse
如题,效果如下
回复讨论(解决方案)
找美工做图片吧
要么做图片，打热点
可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。
写了个js生成点 画直线的，楼主参考下
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> .point { position:absolute; width:1px; height:1px; overflow:hidden; background:#000; } .col { position:absolute; left:300px; top:100px; font-size:20px; font-weight:bold; text-align:center; } .right { left:500px; } p { width:20px; border:1px solid red; } </style> </head> <body> <div class="col"> <p>a</p> <p>c</p> <p>b</p> </div> <div class="col right"> <p>B</p> <p>A</p> <p>C</p> </div> <script> var x = []; var y = []; document.onclick = function(e){ e = window.event || e; var tx = e.clientX; var ty = e.clientY; x.push(tx); y.push(ty); //console.log( x ); //console.log( y ); if( x.length == 2 && y.length == 2 ){ createLine(x[0], y[0], x[1], y[1]); x.length = 0; y.length = 0; } } function point(x, y){ var div = document.createElement('div'); div.style.left = x + 'px'; div.style.top = y + 'px'; div.className = 'point'; document.body.appendChild(div); } function createLine(x1,y1,x2,y2){ var tmp, x, y; if(x1 >= x2){ tmp = x1; x1 = x2; x2 = tmp; tmp = y1; y1 = y2; y2 = tmp; } for(var i = x1 ; i < x2; i++){ x = i; y = (y2 - y1)/(x2 - x1)*(x - x1)+y1; point(x,y); } } </script> </body></html> ?????,?主?考下:
?用鼠???名?展??????
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b064ea1963483f6bff4d1dc648487091
b2386ffb911b14667cb8f0f91ea547a7Organization6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
b203858bb33aa17060946094c228aab9
531ac245ce3e4fe3d50054a55f265927
c105f1604655c18ada9eb5f1299942d5
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
7f0004267241d69d19b8fda47911f741
d0dc54adf72cb57ad82e2ab830ac4473
25edfb22a4f469ecb59f1190150159c68d767d7c97b14deac8f24675aebeb6fb4a9ac43c101f1ef91adebc0611c53fc2董事长5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
d9c350dc226604ee38a9229e465fccc1
25edfb22a4f469ecb59f1190150159c6c394056b6321f727a863e85c2f458fa1aac9746a0c62bd59fd00c92c888c2196总经理5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
3f3e05f16067e5705de6e1353c8d92f2
25edfb22a4f469ecb59f1190150159c67e420f479f493c3df7c4bbaabca9f1fdbf105d2543d3b6e2565ed52cc2866d3d主任5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65f897207b8b66b527ac9f9408ece773fdd3f687eb7b8b2c241ac51a5c69d000b科室5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
2ab4e665d3143987c3e09047831211e5
25edfb22a4f469ecb59f1190150159c6ae1fdfe4a9419b4f0a93933bdd77c6af8e27d19c06dac6e803f1eb41daea8e28一组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64c641c610fe95fddefd4aaf96df307878e27d19c06dac6e803f1eb41daea8e28二组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65f897207b8b66b527ac9f9408ece773fa6dddf1c62bc7a357f791ed89363702b布兰妮5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
4e9b41b8ddaceff88b49a61ae6ed5d90
25edfb22a4f469ecb59f1190150159c6ae1fdfe4a9419b4f0a93933bdd77c6af8e27d19c06dac6e803f1eb41daea8e28A组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65f897207b8b66b527ac9f9408ece773f96ed9102ba81c9cebf93b5f031ace5b1B组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
1198a5bea3e24ba10a2f850dc0ccd8db
25edfb22a4f469ecb59f1190150159c6ae1fdfe4a9419b4f0a93933bdd77c6af8e27d19c06dac6e803f1eb41daea8e28A组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c65f897207b8b66b527ac9f9408ece773f8e27d19c06dac6e803f1eb41daea8e28B组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64c641c610fe95fddefd4aaf96df307878e27d19c06dac6e803f1eb41daea8e28C组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64c641c610fe95fddefd4aaf96df307878e27d19c06dac6e803f1eb41daea8e28C组5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64c641c610fe95fddefd4aaf96df307878e27d19c06dac6e803f1eb41daea8e28强仁5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c64c641c610fe95fddefd4aaf96df307878e27d19c06dac6e803f1eb41daea8e28经理5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e