/
index.html
86 lines (76 loc) · 2.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<!--
作者: wallimn, http://wallimn.iteye.com
时间:2017年5月7日
功能:很酷的分类动画展示包
-->
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>酷炫分类-wallimn</title>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
#svg {
margin:0;
position:relative;
top:50%;
border-radius:5px;
border:1px solid #efefef;
}
text{
font-size:14px;
}
</style>
</head>
<body>
<svg id='paper'></svg>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/snap.svg.min.js"></script>
<script type="text/javascript" src="js/snapcat.js"></script>
<script type="text/javascript">
$(function(){
var clientWidth=document.body.clientWidth;
var clientHeight=document.body.clientHeight;
$("#paper").css("width",clientWidth+"px").css("height",clientHeight+"px");
var minsize = Math.min(clientWidth,clientHeight);
var paper = Snap("#paper");
//创建床半径为80的圆
var centerX=clientWidth/2, centerY=clientHeight/2 ;
var data = [
{id:1,pid:0,label:'知识体系',data:null},
{id:2,pid:1,label:'产品',data:null},
{id:3,pid:1,label:'运营',data:null},
{id:4,pid:1,label:'规划',data:null},
{id:5,pid:1,label:'创意',data:null},
{id:6,pid:1,label:'战略',data:null},
{id:9,pid:2,label:'产品-子类1',data:'A001'},
{id:10,pid:2,label:'产品-子类2',data:'A002'},
{id:31,pid:2,label:'产品-子类3',data:'A001'},
{id:32,pid:2,label:'产品-子类4',data:'A002'},
{id:11,pid:3,label:'运营-子类1',data:'A003'},
{id:12,pid:3,label:'运营-子类2',data:'A004'},
{id:13,pid:3,label:'运营-子类3',data:'A005'},
{id:14,pid:4,label:'规划-子类1',data:'A006'},
{id:15,pid:4,label:'规划-子类2',data:'A007'},
{id:16,pid:4,label:'规划-子类3',data:'A008'},
{id:17,pid:4,label:'规划-子类4',data:'A009'},
{id:18,pid:5,label:'创意-子类1',data:'A010'},
{id:18,pid:5,label:'创意-子类2',data:'A011'},
{id:20,pid:6,label:'战略-子类1',data:'A012'},
{id:21,pid:6,label:'战略-子类2',data:'A013'},
{id:22,pid:6,label:'战略-子类3',data:'A014'},
{id:23,pid:6,label:'战略-子类4',data:'A012'},
{id:24,pid:6,label:'战略-子类5',data:'A013'},
{id:25,pid:6,label:'战略-子类6',data:'A014'},
];
var snapcat = new Snapcat(paper,data,{centerX:centerX,centerY:centerY});
snapcat.drawCat();
});
</script>
</body>
</html>