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 硬盘序列号+其它硬件信息
Dec 23 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php session应用实例 登录验证
2009/03/16 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php定界符
2014/06/19 PHP
yii操作session实例简介
2014/07/31 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
社团活动总结格式
2014/08/29 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书