首頁 > web前端 > js教程 > jquery animate實作滑鼠放上去顯示離開隱藏效果_jquery

jquery animate實作滑鼠放上去顯示離開隱藏效果_jquery

WBOY
發布: 2016-05-16 17:28:12
原創
1453 人瀏覽過

1.CSS樣式:

複製程式碼程式碼如下:

@CHARSET "UTF-8" ;
* html .showbox,* html .overlay {
位置:絕對;
top: 表達式(eval(document.documentElement.scrollTop) );
}
#AjaxLoading { 邊框:1px 實心#8CBEDA;
顏色:#37a;
字體大小:12px;
字體粗細:粗體;
}
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord
}寬度:180px;
高度:50px;
行高:50px;
邊框:2px實線#D6E7F2;
背景:#fff;
}
#AjaxLoading img邊距:10px 15px;
浮動:向左;
顯示:內聯;
}
.overlay {
位置:固定;
頂部:0;
右:0;
底部:0;
左:0;
z 索引:998;
寬度:100%;
高度:100%;
_padding: 0 20pxxx 0 0;
背景:#f6f4f5;
顯示:無;
}
.showbox {
位置:固定;
頂部:0;
左:50%;
z 索引:9999;
不透明度:0;
濾鏡:alpha(不透明度= 0);
左邊距:-80px; } 2、JS:

複製程式碼


程式碼如下:


** */
function getLoadingHtml(msg) {
if(!msg) msg​​ = "載入";
var html = "
"
"
"

"jquery animate實作滑鼠放上去顯示離開隱藏效果_jquery" msg "中,請稍候..."
"
"


”;
返回html;
}
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height(document).height(document).height(document). ();
$(".overlay").css({"height": h});
var div = $("body").find("#loadingDiv");
div .remove();
$("body").append($(loadingDiv));
}
/**
* 載入動畫視窗
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function startLoading(msg) {
ajaxLoadingInit(msg);
$(".overlay").css({'display':'block','opacity':'0.8'});
$(".showbox").stop( true).animate({'margin-top':'300px','opacity':'1'},200);
}
/**
* 開始顯示loading,在ajax執行前呼叫
* @param msg 操作訊息,"載入", "儲存", "刪除"
*/
function endLoading() {
$(".showbox").stop(true).animate({'margin-top':'250px ','不透明度':'0'},400);
$(". overlay").css({'display':'none','opacity':'0'});
} 複製程式碼


程式碼如下:


startLoading();
$.ajax({
",
url : this.url,
dataType : "json",
data : this.args,
success : 函數(data) {

},
完成: function () {
if (self.showLoading == true) endLoading();
}, 錯誤: this.error });
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板