jquery怎么实现关系图的绘制

2023-03-19 13:15:01JavaScript016

jquery怎么实现关系图的绘制,第1张

实例代码如下：

<!DOCTYPE html >

<head>

<title>jQuery渐显效果的人物多级关系图</title>

#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>

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>

</body>

</html>

《简爱》人物关系树状图:

1、简爱——罗切斯特（恋人/夫妻）——疯女（夫妻）

2、海伦－－简爱（孤儿院好友）

3、布洛克尔赫斯特——坏人，孤儿院主持

4、圣约翰——简爱（表兄妹，简爱的追求者之一）

5、戴安娜和玛丽－－简爱的表姐，圣约翰的胞妹

6、爱丽思·费尔菲克斯－－罗切斯特的女管家，简爱的朋友

7、阿黛勒－－罗切斯特的朋友的女儿，罗切斯特是她的监护人，简爱的学生

8、英格拉姆小姐－－罗切斯特的追求者

扩展资料：

主要人物介绍：

1、简爱

女主人公，一个性格坚强，朴实，刚柔并济，独立自主，积极进取的女性。她出身卑微，相貌平凡，但她并不以此自卑。她蔑视权贵的骄横，嘲笑他们的愚笨，显示出自立自强的人格和美好的理想。她有顽强的生命力，从不向命运低头，最后有了自己所向往的美好生活。

2、爱德华.费尔法克斯·罗切斯特

特恩费德庄园主，拥有财富和强健的体魄，年轻时他过着放浪的生活，后来决心认真生活，喜欢简爱并向她求婚。晚年时由于第一任妻子的疯狂放火而失去一条胳膊和一只眼睛。最后成为简爱的丈夫。

3、贝茜

盖茨赫德庄园的仆人，相较之下她对简爱很好，后来嫁给看门人利文，曾来庄园看望过简爱。

4、里德太太

简·爱的舅妈，曾违心答应丈夫收养简爱，对简·爱并不公平。儿子自杀使她中风，临死前良心发现，告诉简·爱她还有亲属在世真相。

5、伊莱扎·里德

里德太太的女儿，习惯把自己的一天安排得井井有条，日常生活规律如钟表般精准，因弟弟的行为和家庭的败落而痛苦，决心隐居，后当了修女，后来成为修道院院长，将所有财产都捐献了。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：台式电脑怎么插线

# 下一篇：CSS设置链接的样式

推荐阅读

热门文章

最新发布

标签列表

jquery怎么实现关系图的绘制

给您推荐相同类型的内容：