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类
Sep 08 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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
用文本作数据处理
2006/10/09 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
js null undefined 空区别说明
2010/06/13 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
js实现验证码功能
2020/07/24 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
python中remove函数的踩坑记录
2021/01/04 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
导游词之苏州寒山寺
2019/12/05 职场文书