欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery animate實現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果

 更新時間:2013年07月21日 17:53:06   作者:  
本文為大家介紹下使用jquery animate實現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果,感興趣的朋友可以參考下哈,希望對大家有所幫助
1、CSS樣式:
復(fù)制代碼 代碼如下:

@CHARSET "UTF-8";
* html .showbox,* html .overlay {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
border: 1px solid #8CBEDA;
color: #37a;
font-size: 12px;
font-weight: bold;
}
#AjaxLoading div.loadingWord {
width: 180px;
height: 50px;
line-height: 50px;
border: 2px solid #D6E7F2;
background: #fff;
}
#AjaxLoading img {
margin: 10px 15px;
float: left;
display: inline;
}
.overlay {
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;
}
.showbox {
position: fixed;
top: 0;
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80px;
}

2、JS:
復(fù)制代碼 代碼如下:

/**
* 加載動畫窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = "加載";
var html = "<div id='loadingDiv'>"
+ "<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>"
+ "<div style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
+ "<div class='loadingWord'>"
+ "<img src='" + Util.getContentPath() +"/images/ajax-loader.gif'>" + msg + "中,請稍候..."
+ "</div>"
+ "</div>"
+ "<div style='height: 1200px;'></div>"
+ "</div>";
return html;
}
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height();
$(".overlay").css({"height": h});
var div = $("body").find("#loadingDiv");
div.remove();
$("body").append($(loadingDiv));
}
/**
* 開始顯示loading,在ajax執(zhí)行之前調(diào)用
* @param msg 操作消息,"加載", "保存", "刪除"
*/
function startLoading(msg) {
ajaxLoadingInit(msg);
$(".overlay").css({'display':'block','opacity':'0.8'});
$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
}
/**
* 加載完成后隱藏,在ajax執(zhí)行完成后(complete)調(diào)用
*/
function endLoading() {
$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
$(".overlay").css({'display':'none','opacity':'0'});
}

3、調(diào)用例子:
復(fù)制代碼 代碼如下:

startLoading();
$.ajax({
type : "POST",
url : this.url,
dataType : "json",
data : this.args,
success : function (data) {

},
complete : function () {
if (self.showLoading == true) endLoading();
},
error : this.error
});

相關(guān)文章

  • jCallout 輕松實現(xiàn)氣泡提示功能

    jCallout 輕松實現(xiàn)氣泡提示功能

    在提交表單前、焦點轉(zhuǎn)移后或者 keyup 時往往需要對輸入的文本就行檢驗,如果輸入內(nèi)容不符合相關(guān)約定則要進(jìn)行提示或警告,有一個叫 jCallout 的插件可以輕松實現(xiàn)該功能,該插件基于 jQuery 使用,所以使用前需要添加引用 jQuery
    2013-09-09
  • jQuery 選擇器(61種)整理總結(jié)

    jQuery 選擇器(61種)整理總結(jié)

    這篇文章主要介紹了jQuery 選擇器(61種)整理的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • 很棒的學(xué)習(xí)jQuery的12個網(wǎng)站推薦

    很棒的學(xué)習(xí)jQuery的12個網(wǎng)站推薦

    jQuery是目前最流行的 JavaScript 庫。對于初學(xué)者來說,有的時候很難找到一個好的學(xué)習(xí)jQuery的網(wǎng)站,今天本文收集了12個很棒的 jQuery 學(xué)習(xí)網(wǎng)站推薦給大家。
    2011-04-04
  • 關(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法

    關(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法

    下面小編就為大家?guī)硪黄P(guān)于jquery中動態(tài)增加select,事件無效的快速解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    這篇文章主要介紹了jQuery中ScrollTo用法,結(jié)合實例形式分析了jQuery中ScrollTo的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下
    2016-09-09
  • jQuery獲取地址欄參數(shù)插件(模仿C#)

    jQuery獲取地址欄參數(shù)插件(模仿C#)

    前些陣子寫了個插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)。現(xiàn)在拿出來和大家分享。感覺這個插件還是蠻有用的。
    2010-10-10
  • jQuery使用height()獲取高度需要注意的地方

    jQuery使用height()獲取高度需要注意的地方

    這篇文章主要介紹了jQuery使用height()獲取高度需要注意的地方,對于display:none或者隱藏的部分無法獲取到其高度,這是使用jQuery的height方法需要注意的地方,需要的朋友可以參考下
    2014-12-12
  • 淺析LigerUi開發(fā)中謹(jǐn)慎載入common.css文件

    淺析LigerUi開發(fā)中謹(jǐn)慎載入common.css文件

    這一句是載頁面載入時,顯示正在載入動畫效果,但是極大影響了程序開發(fā)里的調(diào)試。給新手的建議,希望可以參考下
    2013-07-07
  • jQuery+css實現(xiàn)圖片滾動效果(附源碼)

    jQuery+css實現(xiàn)圖片滾動效果(附源碼)

    圖片滾動效果想必大家都已司空見慣了吧,接下來本文介紹下jQuery+CSS實現(xiàn)圖片滾動,感興趣的你可不要錯過了哈,希望可以幫助到你
    2013-03-03
  • jQuery中DOM操作原則實例分析

    jQuery中DOM操作原則實例分析

    這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實例形式分析了jQuery針對dom元素操作的四種常見原則,需要的朋友可以參考下
    2019-08-08

最新評論