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


Posted in Javascript onJuly 21, 2013

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 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:
/** 
* 加载动画窗口 
* 
* @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执行之前调用 
* @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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
js+canvas实现画板功能
Sep 13 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
jquery封装的对话框简单实现
Jul 21 #Javascript
jquery触发a标签跳转事件示例代码
Jul 21 #Javascript
用JavaScript实现动画效果的方法
Jul 20 #Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 #Javascript
js动态创建表格,删除行列的小例子
Jul 20 #Javascript
JavaScript中setAttribute用法介绍
Jul 20 #Javascript
jquery动态添加删除div 具体实现
Jul 20 #Javascript
You might like
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
浅析php单例模式
2014/11/25 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python三级目录展示的实现方法
2016/09/28 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
公司年会演讲稿范文
2014/01/11 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
政风行风整改方案
2014/10/25 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python