0%
自己写的扩展JQ的LOADING插件，九次方作业
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>
<head>
<title>数据加载插件</title>
<link rel="stylesheet" type="text/css" href="../css/loading.css">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/loading.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
.main {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 50%;
border-right: 1px solid #ccc;
height: 500px;
}
.right {
float: right;
width: 49%;
height: 500px;
}
.loadBtn,.doneBtn {
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background: blue;
border: none;
padding:0 10px;
}
.doneBtn{background-color: red}
</style>
</head>
<body>
<button id="changeBtn" class="doneBtn">读取完毕</button>
<button id="changeBtn1" class="loadBtn">开始读取</button>
<div class="main">
<div id="msg" class="left">
<p>内容内容</p>
<p>内容内容</p>
<p>内容内容</p>
</div>
<div id="msg1" class="right">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var msg = $("#msg").myLoading({
msg: '请稍后...',
mask: true,
img:true
});
msg.init()
var msg1 = $("#msg1").myLoading({mask:false});
msg1.init()
$("#changeBtn").on("click", function() {
msg.destroy();
})
$("#changeBtn1").on("click", function() {
msg.init()
})
});
</script>
</body>
</html>
|
loading.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
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
| .loadDiv {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color: #fff;
z-index: 9;
color:#fff;
line-height: 40px;
padding:0 10px 0 10px;
border-radius: 3px;
white-space:nowrap;
background-color:rgba(0,0,0,0.5);
text-align:center;
}
.mask{
background: #333;
filter: alpha(opacity=30);
opacity: 0.3;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.ldGif{
position: absolute;
left: 10px;
top: 5px;
}
.spinner {
width: 150px;
text-align: center;
}
.spinner > div {
width: 15px;
height: 15px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%,100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
|
loading.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
| (function($) {
$.fn.extend({
myLoading: function(config) {
var defaults = {
msg: '数据加载中',
mask:true,
img:true
};
var config = $.extend(defaults, config);
this.init = function() {
this.destroy();
var loadDiv = $("<div class='loadDiv'>" + config.msg + "</div>");
this.css("position", "relative");
this.append(loadDiv);
if(config.mask){
var mask = $("<div class='mask'></div>");
this.append(mask);
}
if(config.img){
var img = $("<div class='spinner'>"+
"<div class='bounce1'></div>"+
"<div class='bounce2'></div>"+
"<div class='bounce3'></div>"+
"</div>");
this.find('.loadDiv').append(img);
}
}
this.destroy = function() {
$(this).find('.loadDiv').hide();
$(this).find(".mask").hide()
}
return this;
}
});
})(window.jQuery);
|