提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

jqueryanimate实现鼠标放上去显示离开隐藏效果

实现 显示 效果 隐藏 鼠标 离开 放上去
2023-06-13 09:15:03 时间
1、CSS样式：
复制代码代码如下:

@CHARSET"UTF-8";
*html.showbox,*html.overlay{
position:absolute;
top:expression(eval(document.documentElement.scrollTop));
}
#AjaxLoading{
border:1pxsolid#8CBEDA;
color:#37a;
font-size:12px;
font-weight:bold;
}
#AjaxLoadingdiv.loadingWord{
width:180px;
height:50px;
line-height:50px;
border:2pxsolid#D6E7F2;
background:#fff;
}
#AjaxLoadingimg{
margin:10px15px;
float:left;
display:inline;
}
.overlay{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:998;
width:100%;
height:100%;
_padding:020px00;
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：
复制代码代码如下:

/**
*加载动画窗口
*
*@authordendy
*@since2013-7-1910:13:05
*/
functiongetLoadingHtml(msg){
if(!msg)msg="加载";
varhtml="<divid="loadingDiv">"
+"<divstyle="height:1325px;display:none;opacity:0;"class="overlay"></div>"
+"<divstyle="opacity:0;margin-top:250px;"id="AjaxLoading"class="showbox">"
+"<divclass="loadingWord">"
+"<imgsrc=""+Util.getContentPath()+"/images/ajax-loader.gif">"+msg+"中，请稍候..."
+"</div>"
+"</div>"
+"<divstyle="height:1200px;"></div>"
+"</div>";
returnhtml;
}
functionajaxLoadingInit(msg){
varloadingDiv=getLoadingHtml(msg);
varh=$(document).height();
$(".overlay").css({"height":h});
vardiv=$("body").find("#loadingDiv");
div.remove();
$("body").append($(loadingDiv));
}
/**
*开始显示loading，在ajax执行之前调用
*@parammsg操作消息，"加载","保存","删除"
*/
functionstartLoading(msg){
ajaxLoadingInit(msg);
$(".overlay").css({"display":"block","opacity":"0.8"});
$(".showbox").stop(true).animate({"margin-top":"300px","opacity":"1"},200);
}
/**
*加载完成后隐藏，在ajax执行完成后（complete）调用
*/
functionendLoading(){
$(".showbox").stop(true).animate({"margin-top":"250px","opacity":"0"},400);
$(".overlay").css({"display":"none","opacity":"0"});
}

3、调用例子：
复制代码代码如下:
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
});

相关文章