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 限制输入脚本大全
Nov 03 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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
长波知识介绍
2021/03/01 无线电
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
php 获取本地IP代码
2013/06/23 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
大学生的创业计划书就该这么写
2014/01/30 职场文书
高三复习计划
2015/01/19 职场文书
五一晚会主持词
2015/07/01 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript