html页⾯展⽰关系图，可拖拽的html5⼈物关系图代码
⼀款可拖拽的html5⼈物关系图代码，可以显⽰预设的⼈物头像、⼈物的关系等，可以⿏标拖拽来⾃由排列⼈物顺序，可以指定不同关系的连线样式。
查看演⽰
下载资源：
33
次 下载资源
下载积分：
20
积分
页⾯的body部分，设置好⼈物关系的canvas显⽰容器，代码如下：
页⾯的底部，需引⼊jQuery库和必要的JS⽂件，并设置好⼈物关系所有的显⽰内容，代码如下：
$(document).ready(function() {
var gxData={
user:{img:'img/6.png'},
other:[
{x:200,y:33,size:56,img:'img/1.png',relation:'家⼈',url:'#'},
{x:270,y:36,size:45,img:'img/2.png',relation:'家⼈',url:'#'},
{x:258,y:136,size:52,img:'img/3.png',relation:'朋友',url:'#'},
{x:232,y:245,size:44,img:'img/4.png',relation:'朋友',url:'#'},
{x:142,y:221,size:55,img:'img/5.png',relation:'朋友',url:'#'},
{x:33,y:231,size:52,img:'img/6.png',relation:'同学',url:'#'},
{x:44,y:115,size:42,img:'img/1.png',relation:'同学',url:'#'},
{x:108,y:30,size:49,img:'img/2.png',relation:'同学',url:'#'},
]
}
create(gxData);
});
function create(gxData){
var canvas = ElementById('relation');
var stage = new JTopo.Stage(canvas); // 创建⼀个舞台对象
var scene = new JTopo.Scene(stage); // 创建⼀个场景对象
scene.backgroundColor="#000";
var userNode = new JTopo.Node(); // 创建⼀个节点
userNode.setBound(137, 117, 66, 66); // 同时设置⼤⼩及位置
replace函数和数组公式userNode.showSelected = false; // 不显⽰选中矩形
userNode.setImage(gxData.user.img); // 设置图⽚
scene.add(userNode); // 放⼊到场景中
var her.length,jr=true,py=true,ts=true;
for(var i=0;i
var otherNode = new JTopo.Node(); // 创建⼀个节点
otherNode.her[i].x, her[i].her[i].size, her[i].size); // 同时设置⼤⼩及位置otherNode.borderRadius = 50; // 圆⾓
otherNode.her[i].img, false); // 设置图⽚
otherNode.showSelected = false; // 不显⽰选中矩形
scene.add(otherNode); // 放⼊到场景中html个人网页完整代码图片
otherNode.her[i].url;
otherNode.click(function(event){
window.location.href=event.target.url;
});
slider escape
var link;
her[i].relation=="家⼈"){
if(jr==true){
jr=false;
link = new JTopo.Link(userNode, her[i].relation); // 增加连线
js splice 修改原来的数组么
}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
}
link.strokeColor ='235, 175, 66';
}else her[i].relation=="同学"){
if(ts==true){
ts=false;
link = new JTopo.Link(userNode, her[i].relation); // 增加连线}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
欢迎javalibrary 进入
}
link.strokeColor ='242, 75, 74';
}else her[i].relation=="朋友"){
if(py==true){
py=false;
link = new JTopo.Link(userNode, her[i].relation); // 增加连线}else{
link = new JTopo.Link(userNode, otherNode); // 增加连线
}
link.strokeColor ="61, 124, 201";android 签名过期了怎么办
}
scene.add(link);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。