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 应用代码 方便的排序功能
Feb 06 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
了解javascript中的Dom操作
May 27 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 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
用PHP实现小型站点广告管理
2006/10/09 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python实现计算器简易版
2020/12/17 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
装潢设计专业推荐信模板
2013/11/26 职场文书
前台接待岗位职责
2013/12/03 职场文书
运动会通讯稿300字
2014/02/02 职场文书
接待员岗位责任制
2014/02/10 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android