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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
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
分享PHP header函数使用教程
2013/09/05 PHP
php强制下载文件函数
2016/08/24 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python3匿名函数用法示例
2018/07/25 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
安全承诺书范文
2014/03/26 职场文书
《忆江南》教学反思
2014/04/07 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
停车场管理协议书范本
2014/10/08 职场文书
个人党性锻炼总结
2015/03/05 职场文书
演讲开场白和结束语
2015/05/29 职场文书
《落花生》教学反思
2016/02/16 职场文书
大学生创业计划书
2019/06/24 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android