一款可拖拽的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:&#