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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
angular多语言配置详解
May 16 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/03 冲泡冲煮
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php递归json类实例
2014/12/02 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
js简易版购物车功能
2017/06/17 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python里dict变成list实例方法
2019/06/26 Python
Pytorch之parameters的使用
2019/12/31 Python
Django框架models使用group by详解
2020/03/11 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
python 制作本地应用搜索工具
2021/02/27 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
Structs界面控制层技术
2013/10/11 面试题
党校学习思想汇报
2014/01/06 职场文书
自荐信需注意事项
2014/01/25 职场文书
目标管理责任书
2014/04/15 职场文书
摘录式读书笔记
2015/07/01 职场文书
如何在Python项目中引入日志
2021/05/31 Python