首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 07, 2015

本文实例讲述了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动态效果显示人物结构关系图的方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
List the UTC Time on a Computer
Jun 11 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
Slave(1) 共享文件夹(1) NginxConfig(1) 骨架屏(1) SVN(1) caddy(1) ESXI(1) 横向滚动(1) 表约束(2) 加载异常(1)
You might like
php skymvc 一款轻量、简单的php
2011/06/28 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
Javascript模板技术
2007/04/27 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
你可能不知道的前端算法之文字避让（inMap）
2018/01/12 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
python安装Scrapy图文教程
2017/08/14 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
趣味比赛活动方案
2014/02/15 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
部门2014年度工作总结
2014/11/12 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Django 实现jwt认证的示例
2021/04/30 Python
配置Kubernetes外网访问集群
2022/03/31 Servers