js实例教程-jquery animate实现鼠标放上去显示离开隐藏效果

发布时间:2018-12-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-jquery animate实现鼠标放上去显示离开隐藏效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1、CSS样式:

. 代码如下:


@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 p.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:

. 代码如下:


/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = "加载";
VAR html = "<p id='loadingDiv'>"
+ "<p style='height: 1325px; display: none; opacity: 0;' class='overlay'></p>"
+ "<p style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
+ "<p class='loadingWord'>"
+ "<img src='" + Util.getContentPath() +"/images/ajax-loader.gif'>" + msg + "中,请稍候..."
+ "</p>"
+ "</p>"
+ "<p style='height: 1200px;'></p>"
+ "</p>";
return html;
}
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height();
$(".overlay").css({"height": h});
var p = $("body").find("#loadingDiv");
p.remove();
$("body").apPEnd($(loadingDiv));
}
/**
* 开始显示loading,在ajax执行之前调用
* @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执行完成后(complete)调用
*/
function endLoading() {
$(".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
});

1、CSS样式:

. 代码如下:


@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 p.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:

. 代码如下:


/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = "加载";
var html = "<p id='loadingDiv'>"
+ "<p style='height: 1325px; display: none; opacity: 0;' class='overlay'></p>"
+ "<p style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
+ "<p class='loadingWord'>"
+ "<img src='" + Util.getContentPath() +"/images/ajax-loader.gif'>" + msg + "中,请稍候..."
+ "</p>"
+ "</p>"
+ "<p style='height: 1200px;'></p>"
+ "</p>";
return html;
}
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height();
$(".overlay").css({"height": h});
var p = $("body").find("#loadingDiv");
p.remove();
$("body").append($(loadingDiv));
}
/**
* 开始显示loading,在ajax执行之前调用
* @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执行完成后(complete)调用
*/
function endLoading() {
$(".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
});

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jquery animate实现鼠标放上去显示离开隐藏效果全部内容,希望文章能够帮你解决js实例教程-jquery animate实现鼠标放上去显示离开隐藏效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。