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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
Vue底层实现原理总结
Feb 17 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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操作符与控制结构代码
2011/12/30 PHP
php curl 上传文件代码实例
2015/04/27 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
Javascript 构造函数 实例分析
2008/11/26 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
报到证丢失证明
2014/01/11 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
产假请假条
2014/04/10 职场文书
单位租房协议范本
2014/12/03 职场文书
python tkinter模块的简单使用
2021/04/07 Python