Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
f94b9be6
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f94b9be6
编写于
6月 04, 2015
作者:
罗
罗宪
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
resolve conflict
上级
df906110
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
426 addition
and
73 deletion
+426
-73
static/home.js
static/home.js
+58
-53
static/homeLoad.js
static/homeLoad.js
+108
-0
static/script.js
static/script.js
+0
-1
static/style.css
static/style.css
+257
-14
theme/templates/layout.html
theme/templates/layout.html
+3
-5
未找到文件。
static/home.js
浏览文件 @
f94b9be6
$
(
function
()
{
var
animEndStr
=
'
webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
'
;
var
getTransform
=
function
()
{
var
style
=
"
transform
"
,
anim
=
"
animation
"
,
...
...
@@ -28,26 +27,25 @@ $(function () {
};
var
C
=
createjs
||
{},
T
=
TweenMax
||
{};
var
bannerAnim
=
{
w
:
2
185
,
h
:
1
062
,
w
:
2
400
,
h
:
1
300
,
p_w
:
0
,
p_h
:
0
,
img
:
"
https://t.alipayobjects.com/images/T1URpfXeXtXXXXXXXX.jpg
"
,
stage
:
null
,
Canvas
:
null
,
lineData
:[
{
x
:
2
25
,
y
:
785
,
line
:
3
,
color
:
"
#BEC4C8
"
,
w
:
70
,
h
:
70
,
rotate
:
-
19
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
8
70
,
y
:
245
,
w
:
70
,
h
:
70
,
line
:
3
,
color
:
"
#BEC4C8
"
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
9
40
,
y
:
455
,
w
:
230
,
h
:
110
,
line
:
3
,
color
:
"
#6EB4E0
"
,
circ
:[{
x
:
20
,
y
:
15
,
r
:
80
},{
x
:
125
,
y
:
15
,
r
:
80
}]},
{
x
:
1160
,
y
:
670
,
w
:
4
10
,
h
:
110
,
line
:
3
,
color
:
"
#F0776F
"
,
circ
:[{
x
:
60
,
y
:
15
,
r
:
80
},{
x
:
165
,
y
:
15
,
r
:
80
},{
x
:
285
,
y
:
15
,
r
:
80
}]},
{
x
:
12
85
,
y
:
170
,
w
:
484
,
h
:
110
,
line
:
3
,
color
:
"
#BEC4C8
"
,
circ
:[{
x
:
30
,
y
:
15
,
r
:
80
},{
x
:
145
,
y
:
15
,
r
:
80
},{
x
:
265
,
y
:
15
,
r
:
80
},{
x
:
37
5
,
y
:
15
,
r
:
80
}]},
{
x
:
13
30
,
y
:
520
,
w
:
70
,
h
:
70
,
line
:
3
,
color
:
"
#F0776F
"
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
14
35
,
y
:
365
,
w
:
200
,
h
:
190
,
line
:
3
,
color
:
"
#BEC4C8
"
,
circ
:[{
x
:
20
,
y
:
10
,
r
:
75
},{
x
:
110
,
y
:
10
,
r
:
75
},{
x
:
20
,
y
:
100
,
r
:
75
},{
x
:
110
,
y
:
10
0
,
r
:
75
}]},
{
x
:
16
55
,
y
:
325
,
w
:
115
,
h
:
320
,
line
:
3
,
color
:
"
#F0776F
"
,
circ
:[{
x
:
25
,
y
:
15
,
r
:
75
},{
x
:
35
,
y
:
25
,
r
:
55
},{
x
:
25
,
y
:
115
,
r
:
75
},{
x
:
35
,
y
:
125
,
r
:
55
},{
x
:
25
,
y
:
225
,
r
:
75
},{
x
:
35
,
y
:
23
5
,
r
:
55
}]},
{
x
:
1
680
,
y
:
735
,
w
:
70
,
h
:
70
,
line
:
3
,
color
:
"
#F0776F
"
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
1
845
,
y
:
485
,
w
:
115
,
h
:
410
,
line
:
3
,
color
:
"
#6EB4E0
"
,
circ
:[{
x
:
25
,
y
:
15
,
r
:
75
},{
x
:
35
,
y
:
25
,
r
:
55
},{
x
:
25
,
y
:
115
,
r
:
75
},{
x
:
35
,
y
:
125
,
r
:
55
},{
x
:
25
,
y
:
215
,
r
:
75
},{
x
:
35
,
y
:
225
,
r
:
55
},{
x
:
25
,
y
:
310
,
r
:
75
},{
x
:
35
,
y
:
32
0
,
r
:
55
}]},
{
x
:
1
865
,
y
:
290
,
w
:
70
,
h
:
70
,
line
:
3
,
color
:
"
#F0776F
"
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
1995
,
y
:
280
,
w
:
230
,
h
:
420
,
line
:
3
,
color
:
"
#6EB4E0
"
,
circ
:[{
x
:
25
,
y
:
30
,
r
:
75
},{
x
:
35
,
y
:
40
,
r
:
55
},{
x
:
25
,
y
:
175
,
r
:
75
},{
x
:
35
,
y
:
185
,
r
:
55
},{
x
:
25
,
y
:
310
,
r
:
75
},{
x
:
35
,
y
:
320
,
r
:
55
},
{
x
:
130
,
y
:
30
,
r
:
75
},{
x
:
140
,
y
:
40
,
r
:
55
},{
x
:
130
,
y
:
175
,
r
:
75
},{
x
:
140
,
y
:
185
,
r
:
55
},{
x
:
130
,
y
:
310
,
r
:
75
},{
x
:
140
,
y
:
32
0
,
r
:
55
}]},
{
x
:
2
70
,
y
:
795
,
line
:
4
,
color
:[
"
rgba(190,196,200,1)
"
,
"
rgba(190,196,200,0)
"
],
w
:
70
,
h
:
70
,
rotate
:
-
15
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
8
50
,
y
:
220
,
w
:
70
,
h
:
70
,
line
:
4
,
color
:[
"
rgba(190,196,200,1)
"
,
"
rgba(190,196,200,0)
"
]
,
circ
:{
x
:
10
,
y
:
10
,
r
:
50
}},
{
x
:
9
30
,
y
:
445
,
w
:
230
,
h
:
110
,
line
:
4
,
color
:[
"
rgba(110,180,224,1)
"
,
"
rgba(110,180,224,0)
"
]
,
circ
:[{
x
:
20
,
y
:
15
,
r
:
80
},{
x
:
125
,
y
:
15
,
r
:
80
}]},
{
x
:
1160
,
y
:
670
,
w
:
4
40
,
h
:
115
,
line
:
4
,
color
:[
"
rgba(240,119,111,1)
"
,
"
rgba(240,119,111,0)
"
],
circ
:[{
x
:
60
,
y
:
15
,
r
:
80
},{
x
:
178
,
y
:
15
,
r
:
80
},{
x
:
308
,
y
:
15
,
r
:
80
}]},
{
x
:
12
90
,
y
:
135
,
w
:
524
,
h
:
115
,
line
:
4
,
color
:[
"
rgba(190,196,200,1)
"
,
"
rgba(190,196,200,0)
"
],
circ
:[{
x
:
40
,
y
:
15
,
r
:
80
},{
x
:
165
,
y
:
15
,
r
:
80
},{
x
:
295
,
y
:
15
,
r
:
80
},{
x
:
41
5
,
y
:
15
,
r
:
80
}]},
{
x
:
13
45
,
y
:
510
,
w
:
75
,
h
:
75
,
line
:
4
,
color
:[
"
rgba(240,119,111,1)
"
,
"
rgba(240,119,111,0)
"
],
circ
:{
x
:
10
,
y
:
10
,
r
:
55
}},
{
x
:
14
55
,
y
:
340
,
w
:
210
,
h
:
210
,
line
:
4
,
color
:[
"
rgba(190,196,200,1)
"
,
"
rgba(190,196,200,0)
"
],
circ
:[{
x
:
20
,
y
:
20
,
r
:
75
},{
x
:
120
,
y
:
20
,
r
:
75
},{
x
:
20
,
y
:
110
,
r
:
75
},{
x
:
120
,
y
:
11
0
,
r
:
75
}]},
{
x
:
16
95
,
y
:
300
,
w
:
120
,
h
:
345
,
line
:
4
,
color
:[
"
rgba(240,119,111,1)
"
,
"
rgba(240,119,111,0)
"
],
circ
:[{
x
:
25
,
y
:
15
,
r
:
75
},{
x
:
35
,
y
:
25
,
r
:
55
},{
x
:
25
,
y
:
125
,
r
:
75
},{
x
:
35
,
y
:
135
,
r
:
55
},{
x
:
25
,
y
:
245
,
r
:
75
},{
x
:
35
,
y
:
25
5
,
r
:
55
}]},
{
x
:
1
730
,
y
:
745
,
w
:
75
,
h
:
75
,
line
:
4
,
color
:[
"
rgba(240,119,111,1)
"
,
"
rgba(240,119,111,0)
"
],
circ
:{
x
:
10
,
y
:
10
,
r
:
55
}},
{
x
:
1
910
,
y
:
470
,
w
:
115
,
h
:
450
,
line
:
4
,
color
:[
"
rgba(110,180,224,1)
"
,
"
rgba(110,180,224,0)
"
],
circ
:[{
x
:
25
,
y
:
20
,
r
:
75
},{
x
:
35
,
y
:
30
,
r
:
55
},{
x
:
25
,
y
:
130
,
r
:
75
},{
x
:
35
,
y
:
140
,
r
:
55
},{
x
:
25
,
y
:
240
,
r
:
75
},{
x
:
35
,
y
:
250
,
r
:
55
},{
x
:
25
,
y
:
340
,
r
:
75
},{
x
:
35
,
y
:
35
0
,
r
:
55
}]},
{
x
:
1
920
,
y
:
260
,
w
:
75
,
h
:
75
,
line
:
4
,
color
:[
"
rgba(240,119,111,1)
"
,
"
rgba(240,119,111,0)
"
],
circ
:{
x
:
10
,
y
:
10
,
r
:
55
}},
{
x
:
2070
,
y
:
250
,
w
:
230
,
h
:
455
,
line
:
4
,
color
:[
"
rgba(110,180,224,1)
"
,
"
rgba(110,180,224,0)
"
],
circ
:[{
x
:
25
,
y
:
30
,
r
:
75
},{
x
:
35
,
y
:
40
,
r
:
55
},{
x
:
25
,
y
:
185
,
r
:
75
},{
x
:
35
,
y
:
195
,
r
:
55
},{
x
:
25
,
y
:
340
,
r
:
75
},{
x
:
35
,
y
:
350
,
r
:
55
},
{
x
:
140
,
y
:
30
,
r
:
75
},{
x
:
150
,
y
:
40
,
r
:
55
},{
x
:
140
,
y
:
185
,
r
:
75
},{
x
:
150
,
y
:
195
,
r
:
55
},{
x
:
140
,
y
:
340
,
r
:
75
},{
x
:
150
,
y
:
35
0
,
r
:
55
}]},
],
init
:
function
()
{
var
self
=
this
;
...
...
@@ -68,31 +66,16 @@ $(function () {
self
.
bannerResize
();
$
(
window
).
bind
(
"
resize
"
,
self
.
bannerResize
);
self
.
loadImg
();
},
loadImg
:
function
()
{
var
self
=
this
;
var
loadBox
=
$
(
"
<div class='load-box'><em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>
"
+
"
</div>
"
).
appendTo
(
self
.
box
);
var
img
=
new
Image
();
img
.
onload
=
function
()
{
loadBox
.
addClass
(
"
load-out
"
).
one
(
animEndStr
,
function
()
{
loadBox
.
remove
();
self
.
start
();
});
};
img
.
src
=
self
.
img
;
self
.
start
()
},
bannerResize
:
function
()
{
var
self
=
bannerAnim
;
self
.
p_w
=
self
.
box
.
parent
().
width
();
self
.
p_h
=
self
.
box
.
parent
().
height
();
//获取比例;
var
w_s
=
self
.
p_w
/
self
.
w
,
h_s
=
self
.
p_h
/
self
.
h
;
var
scale
=
w_s
>
h_s
?
w_s
:
h_s
;
var
w_s
=
self
.
p_w
/
self
.
w
+
0.08
,
h_s
=
self
.
p_h
/
self
.
h
+
0.08
;
var
scale
=
self
.
scale
=
w_s
>
h_s
?
w_s
:
h_s
;
var
tra
=
getTransform
()[
0
];
self
.
animBox
.
attr
(
"
style
"
,
""
);
self
.
imgBox
.
attr
(
"
style
"
,
""
);
...
...
@@ -100,17 +83,18 @@ $(function () {
"
width
"
:
self
.
w
,
"
height
"
:
self
.
h
};
boxSty
[
tra
]
=
"
scale(
"
+
scale
+
"
,
"
+
scale
+
"
)
"
;
self
.
animBox
.
css
(
boxSty
);
var
imgSty
=
{};
imgSty
[
tra
]
=
"
scale(
"
+
scale
+
"
,
"
+
scale
+
"
)
"
;
self
.
imgBox
.
css
(
imgSty
);
if
(
w_s
>
h_s
)
{
self
.
animBox
.
css
(
"
margin-top
"
,
(
self
.
p_h
-
self
.
h
*
w_s
)
/
2
);
self
.
imgBox
.
css
(
"
margin-top
"
,
(
self
.
p_h
-
self
.
h
*
w_s
)
/
2
);
self
.
animBox
.
css
(
{
"
margin-top
"
:
(
self
.
p_h
-
self
.
h
*
w_s
)
/
2
,
"
margin-left
"
:(
self
.
p_w
-
self
.
w
*
w_s
)
/
2
}
);
self
.
imgBox
.
css
(
{
"
margin-top
"
:
(
self
.
p_h
-
self
.
h
*
w_s
)
/
2
,
"
margin-left
"
:(
self
.
p_w
-
self
.
w
*
w_s
)
/
2
}
);
}
else
{
self
.
animBox
.
css
(
"
margin-left
"
,
(
self
.
p_w
-
self
.
w
*
h_s
)
/
2
);
self
.
imgBox
.
css
(
"
margin-left
"
,
(
self
.
p_w
-
self
.
w
*
h_s
)
/
2
);
self
.
animBox
.
css
(
{
"
margin-left
"
:
(
self
.
p_w
-
self
.
w
*
h_s
)
/
2
,
"
margin-top
"
:
(
self
.
p_h
-
self
.
h
*
h_s
)
/
2
}
);
self
.
imgBox
.
css
(
{
"
margin-left
"
:
(
self
.
p_w
-
self
.
w
*
h_s
)
/
2
,
"
margin-top
"
:
(
self
.
p_h
-
self
.
h
*
h_s
)
/
2
}
);
}
},
start
:
function
()
{
...
...
@@ -127,18 +111,18 @@ $(function () {
var
Line
=
new
C
.
Shape
();
var
glow
=
new
C
.
Shape
();
glBox
.
addChild
(
glow
);
glBox
.
addChild
(
Line
);
glow
.
alpha
=
.
3
glBox
.
addChild
(
Line
);
glow
.
alpha
=
.
3
;
var
blurFilter
=
new
C
.
BlurFilter
(
3
,
3
,
10
);
glow
.
filters
=
[
blurFilter
];
var
bounds
=
blurFilter
.
getBounds
();
if
(
w
){
Line
.
graphics
.
ss
(
line
,
"
round
"
).
rs
(
[
color
,
"
#2d2d2d
"
]
,[
0
,
1
],
r
,
h
,
0
,
r
,
h
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
graphics
.
ss
(
line
+
4
,
"
round
"
).
rs
(
[
color
,
"
#2d2d2d
"
]
,[
0
,
1
],
r
,
h
,
0
,
r
,
h
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
Line
.
graphics
.
ss
(
line
,
"
round
"
).
rs
(
color
,[
0
,
1
],
r
,
h
,
0
,
r
,
h
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
graphics
.
ss
(
line
+
4
,
"
round
"
).
rs
(
color
,[
0
,
1
],
r
,
h
,
0
,
r
,
h
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
cache
(
bounds
.
x
,
bounds
.
y
-
2
,
w
+
bounds
.
width
,
line
+
bounds
.
height
);
}
else
{
Line
.
graphics
.
ss
(
line
,
"
round
"
).
rs
(
[
color
,
"
#2d2d2d
"
]
,[
0
,
1
],
w
,
r
,
0
,
w
,
r
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
graphics
.
ss
(
line
+
4
,
"
round
"
).
rs
(
[
color
,
"
#2d2d2d
"
]
,[
0
,
1
],
w
,
r
,
0
,
w
,
r
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
Line
.
graphics
.
ss
(
line
,
"
round
"
).
rs
(
color
,[
0
,
1
],
w
,
r
,
0
,
w
,
r
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
graphics
.
ss
(
line
+
4
,
"
round
"
).
rs
(
color
,[
0
,
1
],
w
,
r
,
0
,
w
,
r
,
r
).
mt
(
0
,
0
).
lt
(
w
,
h
);
glow
.
cache
(
bounds
.
x
-
2
,
bounds
.
y
,
line
+
bounds
.
width
,
h
+
bounds
.
height
);
}
return
glBox
;
...
...
@@ -155,14 +139,34 @@ $(function () {
//T.from(colorMc,.6,{delay:.1*i,x:-self.w,alpha:0,ease:Power2.easeOut})
}
},*/
addMouseAnim
:
function
(){
var
self
=
this
,
img_x
=
self
.
imgBox
;
$
(
"
body
"
).
bind
(
"
mousemove
"
,
function
(
e
){
var
_x
=-
(
e
.
pageX
-
$
(
this
).
width
()
/
2
)
/
35
,
_y
=
-
(
e
.
pageY
-
$
(
this
).
height
()
/
2
)
/
35
;
if
(
_x
>
self
.
w
*
.
04
){
_x
=
self
.
w
*
.
04
}
if
(
_y
>
self
.
h
*
.
04
){
_y
=
self
.
h
*
.
04
}
T
.
set
(
self
.
imgBox
,{
scale
:
self
.
scale
});
T
.
killTweensOf
(
self
.
imgBox
,
true
);
T
.
to
(
self
.
imgBox
,.
5
,{
x
:
_x
,
y
:
_y
})
})
},
endTween
:
function
(){
var
self
=
bannerAnim
;
T
.
to
(
self
.
animBox
,.
5
,{
alpha
:
0
,
onComplete
:
function
(){
self
.
animBox
.
remove
();
self
.
textTween
();
self
.
addMouseAnim
()
}});
self
.
imgBox
.
removeClass
(
"
fn-alpha-out
"
)
//T.to(self.imgBox,.5,{alpha:1})
self
.
imgBox
.
css
(
"
opacity
"
,
1
)
self
.
imgBox
.
css
(
"
opacity
"
,
1
);
$
(
"
body
"
).
css
(
"
background
"
,
"
#fff
"
).
addClass
(
"
index-page
"
);
var
header
=
$
(
"
#header
"
)
||
$
(
"
header
"
),
footer
=
$
(
"
#footer
"
)
||
$
(
"
footer
"
);
header
.
removeAttr
(
"
style
"
);
footer
.
removeAttr
(
"
style
"
)
},
textTween
:
function
(){
var
self
=
this
;
...
...
@@ -177,14 +181,15 @@ $(function () {
addLine
:
function
(){
var
self
=
bannerAnim
;
var
a_lineBox
=
[],
end_num
=
0
;
self
.
textTween
();
function
addLine
(
i
,
j
,
lineBox
){
var
t
=
new
C
.
Shape
();
if
(
j
%
2
){
t
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
-
2
).
mt
(
0
,
0
).
lt
(
0
,
self
.
lineData
[
i
].
h
);
t
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
).
mt
(
0
,
0
).
lt
(
0
,
self
.
lineData
[
i
].
h
);
var
at
=
Math
.
floor
(
j
/
2
);
t
.
x
=
self
.
lineData
[
i
].
w
*
at
}
else
{
t
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
-
2
).
mt
(
0
,
0
).
lt
(
self
.
lineData
[
i
].
w
,
0
);
t
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
).
mt
(
0
,
0
).
lt
(
self
.
lineData
[
i
].
w
,
0
);
var
at
=
j
/
2
;
t
.
y
=
self
.
lineData
[
i
].
h
*
at
;
}
...
...
@@ -196,14 +201,14 @@ $(function () {
if
(
self
.
lineData
[
i
].
circ
.
length
>
0
){
for
(
var
j
=
0
;
j
<
self
.
lineData
[
i
].
circ
.
length
;
j
++
){
var
circ
=
new
C
.
Shape
();
circ
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
-
2
).
dc
(
self
.
lineData
[
i
].
circ
[
j
].
x
+
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
,
self
.
lineData
[
i
].
circ
[
j
].
y
+
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
,
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
);
circ
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
).
dc
(
self
.
lineData
[
i
].
circ
[
j
].
x
+
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
,
self
.
lineData
[
i
].
circ
[
j
].
y
+
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
,
self
.
lineData
[
i
].
circ
[
j
].
r
/
2
);
lineBox
.
addChild
(
circ
);
T
.
from
(
circ
,.
5
,{
alpha
:
0
})
}
}
else
{
var
circ
=
new
C
.
Shape
();
circ
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
-
2
).
dc
(
self
.
lineData
[
i
].
circ
.
x
+
self
.
lineData
[
i
].
circ
.
r
/
2
,
self
.
lineData
[
i
].
circ
.
y
+
self
.
lineData
[
i
].
circ
.
r
/
2
,
self
.
lineData
[
i
].
circ
.
r
/
2
);
circ
.
graphics
.
s
(
self
.
lineData
[
i
].
color
).
ss
(
self
.
lineData
[
i
].
line
).
dc
(
self
.
lineData
[
i
].
circ
.
x
+
self
.
lineData
[
i
].
circ
.
r
/
2
,
self
.
lineData
[
i
].
circ
.
y
+
self
.
lineData
[
i
].
circ
.
r
/
2
,
self
.
lineData
[
i
].
circ
.
r
/
2
);
lineBox
.
addChild
(
circ
);
T
.
from
(
circ
,.
5
,{
alpha
:
0
})
}
...
...
@@ -230,9 +235,9 @@ $(function () {
var
lineBox
=
new
C
.
Container
();
self
.
stage
.
addChild
(
lineBox
);
lineBox
.
x
=
self
.
lineData
[
i
].
x
;
lineBox
.
y
=
self
.
lineData
[
i
].
y
;
lineBox
.
y
=
self
.
lineData
[
i
].
y
+
125
;
lineBox
.
rotation
=
self
.
lineData
[
i
].
rotate
;
var
arr
=
[]
var
arr
=
[]
;
//画外壳方形
for
(
var
j
=
0
;
j
<
4
;
j
++
){
var
line
,
ma
=
Math
.
ceil
(
Math
.
random
()
*
2
-
1
),
...
...
static/homeLoad.js
0 → 100644
浏览文件 @
f94b9be6
/**
* Created by jljsj on 15/6/3.
*/
$
(
function
()
{
var
loadData
=
[
"
/static/easeljs-0.8.0.min.js
"
,
"
/static/TweenMax.min.js
"
,
"
/static/home.js
"
,
"
https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg
"
];
var
animEndStr
=
'
webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
'
;
var
loadFunc
=
{
init
:
function
(){
var
self
=
this
;
self
.
body
=
$
(
"
body
"
);
self
.
header
=
$
(
"
#header
"
)
||
$
(
"
header
"
);
self
.
main
=
$
(
"
.main
"
);
self
.
footer
=
$
(
"
#footer
"
)
||
$
(
"
footer
"
);
self
.
header
.
css
(
"
opacity
"
,
0
);
self
.
footer
.
css
(
"
opacity
"
,
0
);
self
.
addLoad
()
},
addLoad
:
function
(){
var
self
=
this
;
self
.
loadBox
=
$
(
"
<div class='load-main-box'>
"
+
"
<div class='load-box'>
"
+
"
<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>
"
+
"
<span>Ant Design</span>
"
+
"
</div>
"
+
"
<div class='load-bar'></div>
"
+
"
</div>
"
).
appendTo
(
self
.
body
);
self
.
loadBar
=
self
.
loadBox
.
find
(
"
.load-bar
"
);
var
loadText
=
self
.
loadBox
.
find
(
"
span
"
),
str
=
loadText
.
text
(),
loadClass
=
[
"
yoyo-load0
"
,
"
yoyo-load1
"
,
"
yoyo-load2
"
,
"
yoyo-load3
"
,
"
yoyo-load4
"
,
"
yoyo-load5
"
];
loadText
.
empty
();
function
c_random
(
num
,
arrlen
){
var
arr
=
[];
function
r
(
i
){
var
t
=
Math
.
round
(
Math
.
random
()
*
(
num
-
1
));
if
(
t
==
arr
[
i
-
1
]){
r
(
i
);
return
}
arr
.
push
(
t
)
}
for
(
var
i
=
0
;
i
<
arrlen
;
i
++
){
r
(
i
)
}
return
arr
;
}
var
tarr
=
c_random
(
loadClass
.
length
,
str
.
length
);
for
(
var
i
=
0
;
i
<
str
.
length
;
i
++
){
var
t
=
str
[
i
];
if
(
t
==
"
"
){
t
=
"
"
}
var
_class
=
"
yoyo-x-left
"
;
if
(
i
>
0
&&
i
<
str
.
length
-
1
){
_class
=
loadClass
[
tarr
[
i
]]
}
if
(
i
==
str
.
length
-
1
){
_class
=
'
yoyo-x-right
'
}
loadText
.
append
(
"
<p class='
"
+
_class
+
"
'>
"
+
t
+
"
</p>
"
)
}
self
.
load
()
},
load
:
function
(){
var
self
=
this
,
lArr
=
[],
num
=
0
,
tNum
=
0
;
function
getJS
(){
for
(
var
i
=
0
;
i
<
lArr
.
length
;
i
++
){
var
str
=
lArr
[
i
];
if
(
tNum
>=
lArr
.
length
){
self
.
loadBox
.
addClass
(
"
load-out
"
).
one
(
animEndStr
,
function
()
{
self
.
loadBox
.
remove
();
$
(
"
<script src=
"
+
str
+
"
></script>
"
).
appendTo
(
$
(
"
body
"
));
});
}
else
{
$
(
"
<script src=
"
+
str
+
"
></script>
"
).
appendTo
(
$
(
"
body
"
));
}
tNum
++
;
self
.
loadBar
.
css
(
"
width
"
,
tNum
/
loadData
.
length
*
100
+
"
%
"
);
}
}
for
(
var
i
=
0
;
i
<
loadData
.
length
;
i
++
){
var
str
=
loadData
[
i
];
if
(
str
.
indexOf
(
"
.js
"
)
>=
0
)
{
lArr
.
push
(
str
);
num
++
;
if
(
num
>=
loadData
.
length
)
{
setTimeout
(
getJS
,
500
);
}
}
else
{
var
img
=
new
Image
();
img
.
onload
=
img
.
onerror
=
function
()
{
num
++
;
tNum
++
;
self
.
loadBar
.
css
(
"
width
"
,
tNum
/
loadData
.
length
*
100
+
"
%
"
);
if
(
num
>=
loadData
.
length
)
{
setTimeout
(
getJS
,
500
);
}
};
img
.
src
=
str
;
}
}
}
};
$
().
ready
(
function
(){
loadFunc
.
init
()
});
});
\ No newline at end of file
static/script.js
浏览文件 @
f94b9be6
...
...
@@ -22,7 +22,6 @@ $(function() {
$
(
'
.code-boxes
'
).
on
(
'
click
'
,
'
.collapse
'
,
function
()
{
var
highlightBox
=
$
(
this
).
parent
().
parent
().
find
(
'
.highlight
'
);
console
.
log
(
highlightBox
.
is
(
'
:visible
'
));
highlightBox
.
animate
({
height
:
highlightBox
.
is
(
'
:visible
'
)
?
'
hide
'
:
'
show
'
,
opacity
:
highlightBox
.
is
(
'
:visible
'
)
?
0
:
1
...
...
static/style.css
浏览文件 @
f94b9be6
...
...
@@ -61,6 +61,9 @@ body {
line-height
:
1.5
;
color
:
#888
;
font-size
:
14px
;
background
:
#fff
;
transition
:
background
1s
cubic-bezier
(
0.075
,
0.82
,
0.165
,
1
);
-webkit-transition
:
background
1s
cubic-bezier
(
0.075
,
0.82
,
0.165
,
1
)
;
}
*,
...
...
@@ -290,7 +293,6 @@ header {
min-height
:
500px
;
transform-style
:
preserve-3d
;
transition
:
transform
.6s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
),
height
.5s
ease-out
;
transition
:
transform
.6s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
),
height
.5s
ease-out
;
}
.banner-box
{
...
...
@@ -303,11 +305,13 @@ header {
}
.banner-box
.banner-img
{
background
:
url("https://t.alipayobjects.com/images/T1
URpfXeXt
XXXXXXXX.jpg")
center
no-repeat
;
height
:
1
062
px
;
width
:
2
185
px
;
background
:
url("https://t.alipayobjects.com/images/T1
CFtgXb0j
XXXXXXXX.jpg")
center
no-repeat
;
height
:
1
300
px
;
width
:
2
400
px
;
transform-origin
:
0
0
;
-webkit-transform-origin
:
0
0
;
transition
:
opacity
0.5s
ease-out
;
-webkit-transition
:
opacity
0.5s
ease-out
;
}
.banner-box
#bannerAnim
,
...
...
@@ -318,22 +322,26 @@ header {
transform-origin
:
0
0
;
-webkit-transform-origin
:
0
0
;
z-index
:
2
;
background
:
#2d2d2d
top
:
0
;
left
:
0
;
}
.load-box
{
-webkit-perspective
:
300px
;
-moz-perspective
:
300px
;
width
:
5
0px
;
height
:
5
0px
;
width
:
14
0px
;
height
:
8
0px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
margin-left
:
-
25
px
;
margin-top
:
-
25
px
;
margin-left
:
-
70
px
;
margin-top
:
-
40
px
;
z-index
:
99
;
animation
:
alphaTo
.3s
ease-out
;
-webkit-animation
:
alphaTo
.3s
ease-out
;
font-size
:
22px
;
text-align
:
center
;
font-family
:
'Raleway'
,
sans-serif
;
;
}
.load-box
em
{
...
...
@@ -344,12 +352,26 @@ header {
display
:
block
;
width
:
50px
;
height
:
50px
;
animation
:
loadTween
1
S
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
)
infinite
;
}
margin
:
auto
;
animation
:
loadTween
1.5
S
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
)
infinite
;
}
.load-box
span
{
display
:
inline-block
;
}
.load-box
span
>
p
{
float
:
left
;
}
.load-main-box
.load-bar
{
width
:
0%
;
height
:
3px
;
background
:
#6EB4E0
;
transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
-webkit-transition
:
width
.3s
cubic-bezier
(
0.785
,
0.135
,
0.15
,
0.86
);
;
}
.load-out
{
-webkit-animation
:
alphaOut
.5
s
cubic-bezier
(
0.6
,
-0.28
,
0.735
,
0.045
);
animation
:
alphaOut
.5
s
cubic-bezier
(
0.6
,
-0.28
,
0.735
,
0.045
);
-webkit-animation
:
alphaOut
1
s
cubic-bezier
(
0.6
,
-0.28
,
0.735
,
0.045
);
animation
:
alphaOut
1
s
cubic-bezier
(
0.6
,
-0.28
,
0.735
,
0.045
);
}
.banner-box
#bannerAnim
.banner-line-absolute
{
...
...
@@ -595,6 +617,7 @@ footer ul li > a {
}
}
/****************************动画样式*********************************/
.delay-mode
{
animation-fill-mode
:
backwards
!important
;
-webkit-animation-fill-mode
:
backwards
!important
;
...
...
@@ -671,6 +694,226 @@ footer ul li > a {
-webkit-animation
:
alphaOut
.5s
ease-out
;
}
.yoyo-x-right
{
animation
:
xRightMatrixR
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
xRightMatrixR
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-x-left
{
animation
:
xLeftMatrixR
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
xLeftMatrixR
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load0
{
animation
:
Load0
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load0
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load1
{
animation
:
Load1
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load1
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load2
{
animation
:
Load2
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load2
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load3
{
animation
:
Load3
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load3
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load4
{
animation
:
Load4
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load4
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
.yoyo-load5
{
animation
:
Load5
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
-webkit-animation
:
Load5
1s
cubic-bezier
(
0.645
,
0.045
,
0.355
,
1
)
infinite
alternate
;
}
@keyframes
Load5
{
0
%
{
opacity
:
0
;
transform
:
translate
(
-30px
,
30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
-30px
,
30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
Load4
{
0
%
{
opacity
:
0
;
transform
:
translate
(
30px
,
-30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
30px
,
-30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
Load3
{
0
%
{
opacity
:
0
;
transform
:
translate
(
-30px
,
-30px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load3
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
-30px
,
-30px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
Load2
{
0
%
{
opacity
:
0
;
transform
:
translate
(
-30px
,
30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
-30px
,
30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
Load1
{
0
%
{
opacity
:
0
;
transform
:
translate
(
30px
,
30px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load1
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
30px
,
30px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
Load0
{
0
%
{
opacity
:
0
;
transform
:
translate
(
30px
,
-30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
Load0
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translate
(
30px
,
-30px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translate
(
0
,
0
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
xLeftMatrixR
{
0
%
{
opacity
:
0
;
transform
:
translateX
(
-50px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translateX
(
0px
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
xLeftMatrixR
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translateX
(
-50px
)
rotate
(
-30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translateX
(
0px
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
xRightMatrixR
{
0
%
{
opacity
:
0
;
transform
:
translateX
(
50px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
transform
:
translateX
(
0px
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@-webkit-keyframes
xRightMatrixR
{
0
%
{
opacity
:
0
;
-webkit-transform
:
translateX
(
50px
)
rotate
(
30deg
)
scale
(
1.5
,
1.5
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
translateX
(
0px
)
rotate
(
0deg
)
scale
(
1
,
1
);
}
}
@keyframes
fromImgBlur
{
0
%
{
opacity
:
0
;
...
...
@@ -1224,7 +1467,7 @@ footer ul li > a {
-webkit-transform
:
rotateX
(
-180deg
);
}
}
/***************************************************************************/
.index-page
.nav
{
-webkit-animation
:
yTopMatrix
.5s
ease-out
.5s
backwards
;
animation
:
yTopMatrix
.5s
ease-out
.5s
backwards
;
...
...
theme/templates/layout.html
浏览文件 @
f94b9be6
...
...
@@ -18,7 +18,7 @@
<script
src=
"https://t.alipayobjects.com/images/T12TdfXlpbXXXXXXXX.js"
></script>
<script
src=
"/static/script.js"
></script>
</head>
<body
class=
"{%- if post.filepath === 'README.md' %}index-page
{%- endif %}"
>
<body
style=
"{%- if post.filepath === 'README.md' %}background: #fff;
{%- endif %}"
>
<header
id=
"header"
>
<a
class=
"logo"
href=
"/"
>
<img
width=
"60"
style=
"margin-top: -7px"
src=
"https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"
>
...
...
@@ -64,7 +64,7 @@
<div
class=
"main-box"
id=
"main"
>
<div
class=
"banner-box"
>
<div
id=
"bannerAnim"
></div>
<div
class=
"banner-img"
></div>
<div
class=
"banner-img
fn-alpha-out
"
></div>
<div
class=
"banner-entry fn-hide"
>
<div
class=
"entry-title"
>
Ant
</div>
<div
class=
"entry-title"
>
Design
</div>
...
...
@@ -79,9 +79,7 @@
</div>
</div>
</div>
<script
src=
"/static/easeljs-0.8.0.min.js"
></script>
<script
src=
"/static/TweenMax.min.js"
></script>
<script
src=
"/static/home.js"
></script>
<script
src=
"/static/homeLoad.js"
></script>
{%- else %}
<div
class=
"main-wrapper"
>
{%- if post.meta.template === 'component' %}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录