ページロードでの効果の実装
1459 ワード
1.ロードされたloading.css
注意:background部分のposition:fixed;そうでなければ、現在の領域内でのみ隠すことができます.
2、ページ参照
3、マスクの表示と非表示
@charset "UTF-8";
/* LOGIN CSS */
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:#f1f1f1;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.progressBar {
background: white url(../img/loading.gif) no-repeat 10px 10px;
}
.progressBar {
display: block;
width: 148px;
height: 28px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -74px;
margin-top: -14px;
padding: 10px 10px 10px 50px;
text-align: left;
line-height: 27px;
font-weight: bold;
position: absolute;
z-index: 10001;
}
注意:background部分のposition:fixed;そうでなければ、現在の領域内でのみ隠すことができます.
2、ページ参照
<!-- shade div start -->
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">Loading...</div>
<!-- shade div end -->
3、マスクの表示と非表示
//
$("#background,#progressBar").show();
//
$("#background,#progressBar").hide();