Jquery页面加载效果
Posted W+7
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery页面加载效果相关的知识，希望对你有一定的参考价值。
1、说明
Jquery页面加载可实现异步请求时提示“请稍后，正在加载...”效果，同步请求不可用（即ajax async: false）。本文地址：http://www.cnblogs.com/lengzhan/p/6423312.html
2、代码
|
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
114
115
116
117
118
119
120
121
122
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery页面加载特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a, img { border: 0; } .loading { margin: 100px auto 0 auto; width: 400px; text-align: center; font-size: 18px; } .loading .action { text-decoration: none; font-family: "微软雅黑" , "宋体"; } .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; width: 100%; height: 100%; _padding: 0 20px 0 0; background: #f6f4f5; display: none; } .showLoad { position: fixed; top: 0; left: 50%; z-index: 9999; opacity: 0; filter: alpha(opacity=0); margin-left: -80px; } *html, *html body { background-image: url(about:blank); background-attachment: fixed; } *html .showLoad, *html .cover { position: absolute; top: expression(eval(document.documentElement.scrollTop)); } #ajaxLoad { border: 1px solid #8CBEDA; font-size: 12px; font-weight: bold; } #ajaxLoad div.loadAll { width: 180px; height: 50px; line-height: 50px; border: 2px solid #D6E7F2; background: #fff; } #ajaxLoad img { margin: 10px 15px; float: left; display: inline; } </style> <script type="text/javascript"> $(function () { var hei = $(document).height(); $(".cover").css({ "height": hei }); $(".action").click(function () { startWaiting(); setTimeout(function () { endWaiting(); }, 3000); }); }); //开始加载 function startWaiting() { $(".cover").css({ \'display\': \'block\', \'opacity\': \'0.8\' }); $(".showLoad").stop(true).animate({ \'margin-top\': \'300px\', \'opacity\': \'1\' }, 200); } //结束加载 function endWaiting() { $(".showLoad").stop(true).animate({ \'margin-top\': \'250px\', \'opacity\': \'0\' }, 400); $(".cover").css({ \'display\': \'none\', \'opacity\': \'0\' }); } </script></head><body> <div class="loading"> <a class="action" href="javascript:void(0);">点击加载特效</a></div> <div class="cover"> </div> <div id="ajaxLoad" class="showLoad"> <div class="loadAll"> <img src="image/waiting.gif">加载中，请稍候...</div> </div></body></html> |
3、DEMO
以上是关于Jquery页面加载效果的主要内容，如果未能解决你的问题，请参考以下文章