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在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
js实现抽奖功能
2020/11/24 Javascript
python图片验证码生成代码
2016/07/02 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
浅谈python 类方法/静态方法
2020/09/18 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
高一英语教学反思
2014/01/22 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
年度评优评先方案
2014/06/03 职场文书
工作能力自我评价2015
2015/03/05 职场文书