Jq制作的很简单的加载动画效果，有2个效果。一个是圆形动画，一个是X轴的动画效果。先上图，然后贴上代码以及在线演示地址。
CSS：
|
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
|
#MainDiv {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 100px;
}
.item, .item2 {
cursor: pointer;
width: 10px;
height: 10px;
position: absolute;
background-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.item2 {
background-color: #808080;
}
.itemCenter {
background-image: url(cirCenter.png);
}
.show {
font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
margin-left: 20px;
cursor: pointer;
color: #333;
}
.showDefault {
color: #ff4400;
}
#LoadingDiv {
width: 300px;
height: 20px;
margin: 0 auto;
margin-top: 0px;
}
.loadingItem {
position: absolute;
width: 10px;
height: 10px;
background-color: #808080;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
|
Js:
|
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
var LoadingHandler={
Init:function(){
LoadingHandler.Show();
},
Show:function(){
$(".loadingItem").css("margin-left","300px").css("opacity","0");
for(var i=0;i<$(".loadingItem").length;i ){
if(i==$(".loadingItem").length-1){
$($(".loadingItem")[i]).animate({marginLeft:i*10 10,opacity:1},(i 2)*200,function(){
LoadingHandler.Hide();
});
}else{
$($(".loadingItem")[i]).animate({marginLeft:(i)*10 10,opacity:1},(i 2)*200);
}
}
},
Hide:function(){
for(var i=0;i<$(".loadingItem").length;i ){
if(i==$(".loadingItem").length-1){
$($(".loadingItem")[i]).animate({marginLeft:"-300px",opacity:0},(i 2)*200,function(){LoadingHandler.Show();});
}else{
$($(".loadingItem")[i]).animate({marginLeft:"-300px",opacity:0},(i 2)*100);
}
}
}
}
//菜单创建
var CirMenuHandler = {
radiusLength: 20,
//半径
radiusPointX: 0,
//X坐标
radiusPointY: 0,
//Y坐标
radiusParent: null,
//父级容器
radiusShowTag: 0,
//效果模式
Init: function() {
CirMenuHandler.radiusParent = $("#MainDiv");
CirMenuHandler.radiusPointY = CirMenuHandler.radiusPointX = CirMenuHandler.radiusLength 24;
CirMenuHandler.RadiusShow();
},
//创建并显示菜单
RadiusShow: function() {
var itemCount = 12;
var itemRadian = Number(360 / itemCount);
for (var i = 0; i < itemCount; i ) {
var raius = itemRadian * i;
var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength CirMenuHandler.radiusPointX;
var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength;
var item1 = $("<div class="item"></div>");
item1.css("margin-left", x "px").css("margin-top", y "px");
CirMenuHandler.radiusParent.append(item1);
}
for (var i = 0; i < itemCount; i ) {
var raius = itemRadian * i;
var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength CirMenuHandler.radiusPointX;
var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength;
var item2 = $("<div class="item2"></div>");
item2.css("margin-left", CirMenuHandler.radiusPointX "px").css("margin-top", CirMenuHandler.radiusPointY "px");
CirMenuHandler.radiusParent.append(item2);
}
if (CirMenuHandler.radiusShowTag == 0) {
CirMenuHandler.ShowOne();
var mTimer = setInterval(function() {
CirMenuHandler.ShowOne();
}, 1800);
} else {
}
},
ShowOne: function() {
var itemCount = 12;
var itemRadian = Number(360 / itemCount);
for (var i = 0; i < $(".item").length; i ) {
var raius = itemRadian * i;
var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2 CirMenuHandler.radiusPointX;
var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2;
$($(".item")[i]).animate({
marginLeft: x "px",
marginTop: y "px",
opacity: 1
}, 500, function() {
$(this).animate({
marginLeft: CirMenuHandler.radiusPointX "px",
marginTop: CirMenuHandler.radiusPointY "px",
opacity: 0
}, 300);
});
}
for (var i = 0; i < $(".item").length; i ) {
var raius = itemRadian * i;
var x = Math.sin(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2 CirMenuHandler.radiusPointX;
var y = CirMenuHandler.radiusPointY - Math.cos(raius * Math.PI / 180) * CirMenuHandler.radiusLength * 2;
$($(".item2")[i]).animate({
marginLeft: x "px",
marginTop: y "px",
opacity: 1
}, 1000, function() {
$(this).animate({
marginLeft: CirMenuHandler.radiusPointX "px",
marginTop: CirMenuHandler.radiusPointY "px",
opacity: 0
}, 600);
});
}
}
}
|
