只能勉强一点
李 逍 遥：一代主角。
赵 灵 儿：一代主角的妻子。
李 三 思：一代主角的爸爸。
李 忆 如：一代主角的女儿。
酒 剑 仙：一代主角的师父。
王 小 虎：一代主角的邻居。
林 月 如：一代主角的第一个知己。
阿 奴：一个主角的第二个知己。
林 青 儿：一代主角的妻子的妈妈。
巫 王：一代主角的妻子的爸爸。
景 天：一代主角的爸爸的师父。
独孤剑圣：一代主角的师父的师兄。
喻 南 松：一代主角的邻居的朋友。
圣 姑：一代主角的妻子的守护人。
沈 欺 霜：一代主角的邻居的女朋友。
千叶禅师：一代主角的邻居的朋友的师父。
紫 萱：一代主角的妻子的妈妈的妈妈。
铁掌飞凤：一代主角的爸爸的弟弟的妻子。
龙 葵：一代主角的爸爸的师父的前世的妹妹。
飞 蓬：一代主角的爸爸的师父的前世的前世。
徐 长 卿：一代主角的妻子的妈妈的妈妈的丈夫的转世。
夕 瑶：一代主角的爸爸的师父的前世的前世的女朋友。
清 微：一代主角的妻子的妈妈的妈妈的丈夫的转世的师父。
周 赤 炎：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份。
燎 日：一代主角的妻子的妈妈的妈妈所救的狼妖的妖的身份。
慕容紫英：一代主角的爸爸的师父的前世铸的剑的第一个发现者。
苏 媚：一代主角和一代主角的第一个知己所杀的妖怪的孩子。
云 天 河：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄。
拜月教主：一代主角和一代主角的妻子和一代主角的妻子的妈妈的仇人。
云 天 青：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸。
怀 朔：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的师兄。
璇 玑：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的师姐。
韩 菱 纱：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的女朋友。
玄 霄：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸的师兄。
夙 玉：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸的妻子。
南 宫 煌：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的弟弟。
星 璇：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的哥哥。
重 楼：一代主角的爸爸的师父和一代主角的爸爸的师父的前世的前世的朋友兼敌人。
柳 梦 璃：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸所救的女妖。
思 堂：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的哥哥的朋友。
王 蓬 絮：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的哥哥的女朋友。
温 慧：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的弟弟的女朋友。
雪 见：一代主角的爸爸的师父的前世的前世的女朋友给一代主角的爸爸的师父做的女朋友。
婵 幽：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸所救的女妖的妈妈。
花 楹：一代主角的爸爸的师父的前世的前世的女朋友给一代主角的爸爸的师父做的女朋友的宠物。
温 策：一代主角的妻子的妈妈的妈妈所救的狼妖的人的身份的两个儿子中的弟弟的女朋友的哥哥。
归 邪：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸所救的女妖的妈妈的手下武将。
奚 仲：一代主角的爸爸的师父的前世铸的剑的第一个发现者的师侄的爸爸所救的女妖的妈妈的手下文官。
实例代码如下：<!DOCTYPE html >
<head>
<title>jQuery渐显效果的人物多级关系图</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<style type="text/css">
#box{width:500pxheight:500pxposition:relative}
.host{position:absolutewidth:100pxheight:50pxline-height:50pxtext-align:centercolor:#000000background-color:#eeeeeeborder:#000000 1px solidfont-weight:bolder}
.guest{position:absolutewidth:80pxheight:40pxline-height:40pxtext-align:centercolor:#999999background-color:#FFFFFFborder:#000000 1px solidcursor:pointer}
.relationship{position:absolutewidth:60pxheight:20pxcolor:#aaaline-height:20pxfont-size:12pxtext-align:center}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
var relationName = [
{name:"成龙",friend:[
{name:"房祖名",relationship:"父子"},
{name:"林凤娇",relationship:"夫妻"},
},
{name:"房祖名",friend:[
{name:"成龙",relationship:"父子"},
{name:"林凤娇",relationship:"母子"},
},
{name:"林凤娇",friend:[
{name:"成龙",relationship:"夫妻"},
{name:"房祖名",relationship:"母子"},
},
{name:"吴绮莉",friend:[
{name:"成龙",relationship:"绯闻"},
{name:"林凤娇",relationship:"情敌"},
},
{name:"徐静蕾",friend:[
{name:"李亚鹏",relationship:"电影"},
{name:"韩寒",relationship:"娱乐圈"},
},
{name:"方大同",friend:[
{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=0i<array[n].friend.lengthi++){
guests+="<span class='guest'>"+array[n].friend[i].name+"</span>"
}
$(guests).appendTo(box)
$(".guest").live("click",function(){
that.move(that,this)
})
this.postQuest()
},
postQuest:function(){
var guests = $(".guest")
var that = this
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).top
}).attr("angle",i/guests.length)
})
},
setQuestPose:function(n,r,i,w,h,d){//n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度
var p = i/n*Math.PI*2+Math.PI*2*d
var x = r * Math.cos(p)
var y = r * Math.sin(p)
return {
"left":parseInt(this.boxW/2+ x - w/2),
"top":parseInt(this.boxH/2 + y - h/2)
}
},
appendRelationShip:function(array,n){
var box = $("#"+this.id)
var relation=""
for(var i=0i<array[n].friend.lengthi++){
relation+="<span class='relationship'>"+array[n].friend[i].relationship+"</span>"
}
box.append(relation)
this.postRelationShip()
},
postRelationShip:function(){
var guests = $(".relationship")
var that = this
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).top
})
})
},
move:function(t,i){
var n = $(".guest").index($(i))
this.angle = parseFloat($(i).attr("angle"))+0.5
this.delect(n)
this.moveHost(i)
this.moveQuest(i)
this.moveRelationship(i)
this.changeClass()
setTimeout(function(){t.newAppend(i)},500)
},
newAppend:function(i){
this.newAppendGuest(i,"guest","name",this.guestW,this.guestH,this.radius)
this.newAppendGuest(i,"relationship","relationship",this.relationW,this.relationH,this.radius/2)
},
newAppendGuest:function(i,className,name,w,h,r){
var host = $(i).html()
var guest = $(".guest").html()
var box = $("#"+this.id)
var that = this
var next=0
for(var i=0i<this.array.lengthi++){
if(host == this.array[i].name){
for(var j=0j<this.array[i].friend.lengthj++){
if(guest !== this.array[i].friend[j].name){
next++
var guests ="<span class='"+className+"'>"+this.array[i].friend[j][name]+"</span>"
$(guests).appendTo(box).css({
left:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).left,
top:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).top
}).attr("angle",that.angle+next/this.array[i].friend.length).hide().fadeIn(1000)
}
}
}
}
},
moveHost:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2
var hTop = parseInt($(".host").css("top")) + this.hostH/2
var gLeft = parseInt($(i).css("left")) + this.guestW/2
var gTop = parseInt($(i).css("top")) + this.guestH/2
var l = gLeft - hLeft
var t = gTop - hTop
var left = (hLeft - l - this.guestW/2)+"px"
var top = (hTop - t - this.guestH/2)+"px"
this.animate(".host",left,top)
},
moveRelationship:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2
var hTop = parseInt($(".host").css("top")) + this.hostH/2
var gLeft = parseInt($(".relationship").css("left")) + this.relationW/2
var gTop = parseInt($(".relationship").css("top")) + this.relationH/2
var l = gLeft - hLeft
var t = gTop - hTop
var left = (hLeft - l - this.relationW/2)+"px"
var top = (hTop - t - this.relationH/2)+"px"
this.animate(".relationship",left,top)
},
moveQuest:function(i){
var left = $(".host").css("left")
var top = $(".host").css("top")
this.animate(i,left,top)
},
delect:function(n){
$(".guest").slice(0,n).remove()
$(".guest").slice(1).remove()
$(".relationship").slice(0,n).remove()
$(".relationship").slice(1).remove()
},
animate:function(i,left,top){
$(i).animate({
left:left,
top:top
},500)
},
changeClass:function(){
var that =this
$(".guest").addClass("abcdef").removeClass("guest")
$(".host").addClass("guest").removeClass("host").attr("angle",that.angle)
$(".abcdef").addClass("host").removeClass("abcdef").attr("angle",null)
}
}
$(document).ready(function(){
relation.init(relationName,0)
})
</script>
</head>
<body>
看不到效果，刷新一下就可以了；<br>
<div id="box"></div>
</body>
</html>
