javascript 动态显示家族人物结构关系图
日期：2014-05-16 浏览次数：20315 次
javascript 动态显示家庭人物结构关系图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript动态人物关系结构图</title>
<style>
#box{ width:500px; height:500px; position: relative}
.host{ position:absolute; width:100px; height:50px; line-height:50px; text-align:center; color:#000000; background-color:#eeeeee ; border:#000000 1px solid; font-weight:bolder}
.guest{position:absolute; width:80px; height:40px; line-height:40px;text-align:center; color: #999999; background-color:#FFFFFF ; border:#000000 1px solid; cursor:pointer}
.relationship{position:absolute; width:60px; height:20px; color: #aaa; line-height:20px; font-size:12px; text-align:center}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
var relationName = [
{name:"成龙",friend:[
{name:"房祖名",relationship:"父子"},
{name:"林凤娇",relationship:"夫妻"},
{name:"吴绮莉",relationship:"绯闻"},
{name:"徐静蕾",relationship:"激吻"}]
},
{name:"房祖名",friend:[
{name:"成龙",relationship:"父子"},
{name:"林凤娇",relationship:"母子"},
{name:"方大同",relationship:"情敌"},
{name:"薛凯琪",relationship:"女友"},
{name:"陈坤",relationship:"朋友"},
{name:"赵薇",relationship:"朋友"}]
},
{name:"林凤娇",friend:[
{name:"成龙",relationship:"夫妻"},
{name:"房祖名",relationship:"母子"},
{name:"吴绮莉",relationship:"情敌"}]
},
{name:"吴绮莉",friend:[
{name:"成龙",relationship:"绯闻"},
{name:"林凤娇",relationship:"情敌"},
{name:"吴卓林",relationship:"母女"}]
},
{name:"徐静蕾",friend:[
{name:"李亚鹏",relationship:"电影"},
{name:"韩寒",relationship:"娱乐圈"},
{name:"成龙",relationship:"激吻"},
{name:"黄立行",relationship:"电影"}]
},
{name:"方大同",friend:[
{name:"房祖名",relationship:"情敌"},
{name:"薛凯琪",relationship:"否认拍拖"},
{name:"林宥嘉",relationship:"歌手"},
{name:"韩庚",relationship:"演唱会"}]
},
{name:"薛凯琪",friend:[
{name:"方大同",relationship:"否认拍拖"},
{name:"房祖名",relationship:"女友"}]
}
]
var relation = {
radius:150,
boxW:500,
boxH:500,
hostW:100,
hostH:50,
guestW:80,
guestH:40,
relationW:60,
relationH:20,
angle:0,
id:"box",
init:function(array,n){//传入参数1：数组 参数2：第几个
this.array = array;
this.appendHost(this.array,n);
this.appendQuest(this.array,n);
this.appendRelationShip(this.array,n);
},
appendHost:function(array,n){
var box = $("#"+this.id);
var host ="<span class='host'>"+array[n].name+"</span>";
box.append(host)
this.postHost();
},
postHost:function(){
var x = (this.boxW - this.hostW)/2;
var y = (this.boxH - this.hostH)/2;
$(".host").css({
left:x,
top:y
})
},
appendQuest:function(array,n){
var box = $("#"+this.id);
var guests="";
var that = this;
for(var i=0; i<array[n].friend.length; i++){
guests+="<span class='guest'>"+array[n].friend[i].name+"</span>";
}
$(guests).appendTo(box);
$(".guest").live("click",function(){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
