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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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 获取本机外网/公网IP的代码
2010/05/09 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js创建对象的方式总结
2015/01/10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Flask-Mail用法实例分析
2018/07/21 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python scipy卷积运算的实现方法
2019/09/16 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python中setuptools的作用是什么
2020/06/19 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
迎新晚会主持词
2014/03/24 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
树转促学习心得体会
2014/09/10 职场文书
客户答谢会致辞
2015/01/20 职场文书
大学生求职意向书
2015/05/11 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
第一军规观后感
2015/06/12 职场文书