jQuery动态效果显示人物结构关系图的方法

更新时间：2015年05月07日 15:35:03 投稿：shichen2014

这篇文章主要介绍了jQuery动态效果显示人物结构关系图的方法,涉及jQuery操作json结构数据及鼠标事件的技巧,需要的朋友可以参考下

本文实例讲述了jQuery动态效果显示人物结构关系图的方法。分享给大家供大家参考。具体分析如下：

这是一个人物关系图，可动态展示，效果非常漂亮。点击文字可出现动态关系图的转换效果。

<!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>Untitled Document</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="jquery-1.6.2.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(){
  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=0; i<array[n].friend.length; i++){
  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=0; i<this.array.length; i++){
  if(host == this.array[i].name){
  for(var j=0;j<this.array[i].friend.length; j++){
   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>
<div id="box"></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery中$原理实例分析
这篇文章主要介绍了jQuery中$原理,结合实例形式分析了jQuery中$的原理与运行机制,并具体分析了jQuery对象构造的具体原理,需要的朋友可以参考下
2018-08-08
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
这篇文章主要介绍了asp.net+jquery.form实现图片异步上传的方法,结合实例形式分析了jquery.form.js前台异步提交图片与asp.net后台处理的相关技巧,需要的朋友可以参考下
2016-05-05
如何使用jQuery技术开发ios风格的页面导航菜单
这篇文章主要介绍了如何使用jQuery技术开发ios风格的页面导航菜单,需要的朋友可以参考下
2015-07-07
JQuery从头学起第一讲
JQuery的重要性对一个coder来说应该是不言而喻的，多少次在应聘的时候被问及是否会JQuery；多少次在写脚本的时候因为浏览器的不兼容而吐血；多少次因为需要用脚本做一个简单的效果而写到手抽筋。JQuery出现后，很多问题都被轻易解决了。
2010-07-07
jquery的extend和fn.extend的使用说明
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
2011-01-01
jquery写出PC端轮播图实例
本篇文章主要给大家讲述了用jquery如何写出一个PC端的轮播图效果的实例，有兴趣的朋友参考下。
2018-01-01
jQuery Dom元素操作技巧
DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了jquery dom元素操作方法，需要的朋友参考下
2018-02-02
jquery插件推荐浏览器嗅探userAgent
这里给大家推荐一款浏览器嗅探的jQuery插件useragent，兼容各大浏览器，在做项目的时候经常要用到，非常的实用
2014-11-11
jQuery实现简易的天天爱消除小游戏
貌似最近腾讯手机游戏天天爱消除挺火的，我也是粉丝之一，最近对javascript一直比较感兴趣然后想用js仿造一个，应该不是太难，
2015-10-10
jQuery之ajax删除详解
ajax是局部刷新。用jQuery来实现，会简化很多。下面进行详细的说明，结合一个ajax删除的案例来进行
2014-02-02