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 相关文章推荐
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP解析RSS的方法
2015/03/05 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript读取RSS数据
2007/01/20 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python的形参和实参使用方式
2019/12/24 Python
python实现ftp文件传输功能
2020/03/20 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
平面设计岗位职责
2013/12/14 职场文书
优秀员工获奖感言
2014/03/01 职场文书
优秀经理获奖感言
2014/03/04 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
先进单位申报材料
2014/12/25 职场文书
调解书格式范本
2015/05/20 职场文书
红色经典观后感
2015/06/18 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server