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

2024-10-02 19:42:28

本文实例讲述了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渐隐渐显的图片幻灯闪烁切换实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/
jquery实现通用的内容渐显Tab选项卡效果

本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
jquery简单实现带渐显效果的选项卡菜单代码

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
jQuery实现带渐显效果的人物多级关系图代码

本文实例讲述了jQuery实现带渐显效果的人物多级关系图.分享给大家供大家参考.具体如下: 这里演示jQuery实现带渐显效果的人物多级关系图,setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度,测试时请注意,如果右下角提示有错误,请重新刷新页面即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-gxt-style-d
jQuery实现的感应鼠标悬停图片色彩渐显效果

本文实例讲述了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/
jQuery页面图片伴随滚动条逐渐显示的小例子

复制代码代码如下: <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="tex
jquery实现简单实用的弹出层效果代码

本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D
jquery 图片Silhouette Fadeins渐显效果

我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化.他们需要更换其主页上的照片.我想这可能是有趣的事情出现了少许的互动. 这可能有不少方法可以做到这个效果,这一个刚刚进入我的头突然出现,我随它而去了.这个想法是有一个作为背景图像的轮廓,然后,在该组所有完全相同的大小与每个乐队成员的4个图像.这些图像默认隐藏.然后,有4个绝对定位的区域上面所在的区域,这是过渡区作用.在jQuery的,我们用他们悬停事件,渐渐显示相应的图像. HTML 正如我所说,只是一个div里面有四个图像和过渡区域.所有具有
jQuery动态效果显示人物结构关系图的方法

本文实例讲述了jQuery动态效果显示人物结构关系图的方法.分享给大家供大家参考.具体分析如下: 这是一个人物关系图,可动态展示,效果非常漂亮.点击文字可出现动态关系图的转换效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
Android Studio自动生成UML关系图的方法步骤

目录 1.安装Sketch It 2.安装"PlantUML Integration"插件 3. 问题 1.安装Sketch It 这是我的AS版本: 如下步骤: 如下图等待插件全部加载后,搜索"Sketch It"插件安装: 如果安装无效自行到红色框框提示的主页下载手动安装: 选中文件等待安装完毕即可: 如此如下图点击Tools下的"Sketch It!..."按钮即可: 生成"xxx.plantuml"文件: 2.安装&q
jquery控制显示服务器生成的图片流

首先把图片路径作为参数,ajax异步传到后台方法中上传服务器,直接用Jquery传是不行的,它没有权力跟服务器打交道,具体内容不废话了,直接看下文,介绍的很详细. 首先给大家展示下效果图: < 首先是第一副是初始的页面,第二副是点击submit之后服务端生成的二维码,没有保存图片直接将图片流转成字符串返回到页面. 简介: 首先,这种生成二维码方式,而且不需要保存的情况可以在前端使用脚本来实现,那我在项目里也是这样做的. 然后js好像是不能接受服务端的文件流进行操作的,出于安全考虑.如果这种方式是
jquery实现的简单轮播图功能【适合新手】

本文实例讲述了jquery实现的轮播图功能.分享给大家供大家参考,具体如下: 前面介绍了原生js实现的轮播图,今天就试着用jquery做了个轮播图,方法都一样,但jquery实现却比js方便了许多 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
Python基于network模块制作电影人物关系图

在我们生活的世界中,每一个人以及每一个事物相互之间都存在着关系,有直接关系,也有间接关系,最终会形成一个无形的大的关系网.network模块是一个用python语言开发的图论和复杂网络建模工具,模块内置了常用的图与复杂网络分析算法. network模块有四种图:Graph.DiGraph.MultiGraph.MultiDigraph,分别为无多重边无向图.无多重边有向图.有多重边无向图.有多重边有向图.其中Graph是用点和线来刻画离散事物集合中,每对事物间以某种方式相联系的数学模型. 下面我
Intellij IDEA中如何查看maven项目中所有jar包的依赖关系图

Maven 组件界面介绍如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项目.一般单我们在 pom.xml 添加了依赖包或是插件的时候,发现标注 4 的依赖区中没有看到最新写的依赖的话,可以尝试点击此按钮进行项目的重新载入. 第六个按钮:Execute Maven Goal 弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通
jQuery实现折线图的方法

本文实例讲述了jQuery实现折线图的方法.分享给大家供大家参考.具体如下: 效果图如下所示: js引用: 复制代码代码如下: <script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="js/Index/raphael.2.1.0.min.js" type="text/javascri
js对象关系图方便dom操作

js对象关系图 JavaScript 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location HTML DOM 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Document Anchor Area Base
PHP+jquery实时显示网站在线人数的方法

本文实例讲述了PHP+jquery实时显示网站在线人数的方法.分享给大家供大家参考.具体分析如下: 在线人数最简单的就是直接利用js调用php,这样可以显示出有多少人访问了本站,如果要在用户未刷新页面的状态实时显示用户在线人数,我们可以利用jquery ajax来实现. 我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.这里我们将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 本例假设要在页面上动态展示(无需刷新

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

相关推荐

随机推荐