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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
js取模(求余数)隔行变色
May 15 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
Stop SQL Server
2007/06/21 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python使用turtle库绘制时钟
2020/03/25 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
七一表彰活动方案
2014/01/18 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
2014年检验科工作总结
2014/11/22 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL