jquery等待效果示例


Posted in Javascript onMay 01, 2014

实现查询等待:正在查询中,请稍后...

jquery等待效果示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 正在查询,请稍等... </title>
<style type="text/css">
.query_hint{
 border:5px solid #939393;
 width:250px;
 height:50px;
 line-height:55px;
 padding:0 20px;
 position:absolute;
 left:50%;
 margin-left:-140px;
 top:50%;
 margin-top:-40px;
 font-size:15px;
 color:#333;
 font-weight:bold;
 text-align:center;
 background-color:#f9f9f9;
}
.query_hint img{position:relative;top:10px;left:-8px;}
</style>
 </head>
 <body>
  <div id="query_hint" class="query_hint">
   <img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" />正在查询,请稍等...
  </div>
 </body>
</html>

jquery代码

<div id="query_hint" class="query_hint">
    <img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" />正在查询,请稍等...
</div>

<script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//页面加载完成之后去掉Loading
$(document).ready(function(){
    parent.frames[0].queryHintCallback("query_hint");
});
/**
 * @description  * 显示查询等待层
 * @param query_hint
 */
function show_query_hint(query_hint){
    var query_hint = document.getElementById(query_hint);
    query_hint.style.display="block";
}
/**
 * @description 查询结果回调函数
 * @param query_hint 要隐藏的提示层id
 */
function queryHintCallback(query_hint){
    var query_hint = document.getElementById(query_hint);
    query_hint.style.display="none";
}
</script>
Javascript 相关文章推荐
原生javascript实现图片按钮切换
Jan 12 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Angular2.js实现表单验证详解
Jun 23 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Node.js 使用AngularJS的方法示例
May 11 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
js实现checkbox全选和反选示例
May 01 #Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 #Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 #Javascript
js获取ajax返回值代码
Apr 30 #Javascript
You might like
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
python实现排序算法
2014/02/14 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
利用python批量检查网站的可用性
2016/09/09 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
安全协议书范本
2014/04/21 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
英文版辞职信
2015/02/28 职场文书
2015年学校财务工作总结
2015/05/19 职场文书