基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
更新時(shí)間:2011年09月01日 21:03:06 作者:
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn),使用jquery的朋友可以參考下代碼。
loading 加載提示 ······ 透明遮罩 居中
body{
margin: 0;
font-size: 12px;
line-height: 100%;
font-family: Arial, sans-serif;
}
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.progressBar {
border: solid 2px #86A5AD;
background: white url(progressBar_m.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: 2001;
}
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">數(shù)據(jù)加載中,請(qǐng)稍等...</div>
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function () {
ajaxbg.show();
}).ajaxStop(function () {
ajaxbg.hide();
});
作者:曾祥展
復(fù)制代碼 代碼如下:
body{
margin: 0;
font-size: 12px;
line-height: 100%;
font-family: Arial, sans-serif;
}
.background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background:while;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.progressBar {
border: solid 2px #86A5AD;
background: white url(progressBar_m.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: 2001;
}
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">數(shù)據(jù)加載中,請(qǐng)稍等...</div>
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function () {
ajaxbg.show();
}).ajaxStop(function () {
ajaxbg.hide();
});
作者:曾祥展
您可能感興趣的文章:
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 基于jquery的模態(tài)div層彈出效果
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- jquery animate 動(dòng)畫(huà)效果使用說(shuō)明
- 基于jquery的仿百度搜索框效果代碼
- 兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
- 六款幫助你實(shí)現(xiàn)驚艷視差滾動(dòng)效果的jQuery插件
- jQuery操作之效果詳解
相關(guān)文章
jquery判斷checkbox(復(fù)選框)是否被選中的代碼
現(xiàn)在很多朋友都喜歡使用jquery了,所以很多的表格判斷都是基于jquery的,但實(shí)現(xiàn)方法與javascript原生代碼不同,對(duì)于checkbox的判斷大家可以參考下。2010-10-10jquery實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能的方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery實(shí)現(xiàn)分頁(yè)功能(含ajax請(qǐng)求、后臺(tái)數(shù)據(jù)、附完整demo)
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,主要包含ajax請(qǐng)求和后臺(tái)數(shù)據(jù),文末給出了完整的demo示例,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-04-04jQuery獲取復(fù)選框選中的當(dāng)前行的某個(gè)字段的值
這篇文章主要介紹了jQuery獲取復(fù)選框選中的當(dāng)前行的某個(gè)字段的值,需要的朋友可以參考下2017-09-09JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果
jQuery EasyUI 提供易于使用的組件,它使 Web 開(kāi)發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁(yè)面。通過(guò)本文給大家介紹JQuery+EasyUI輕松實(shí)現(xiàn)步驟條效果,需要的朋友參考下2016-02-02jQuery動(dòng)態(tài)追加頁(yè)面數(shù)據(jù)以及事件委托詳解
這篇文章主要為大家詳細(xì)介紹了jQuery動(dòng)態(tài)追加頁(yè)面數(shù)據(jù)以及事件委托的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10