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 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
js获取height和width的方法说明
Jan 06 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python函数定义和调用过程详解
2020/02/09 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
会计实习生自我鉴定
2013/12/12 职场文书
推广普通话演讲稿
2014/05/23 职场文书
美术学专业求职信
2014/07/23 职场文书
售房协议书范本2014
2014/10/23 职场文书
通知的写法
2015/04/23 职场文书
2015年市场部工作总结
2015/04/30 职场文书
热血教师观后感
2015/06/10 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS