纯js+css实现loading等待效果
此插件是基于jqueryUI的widget,下面是具体实现代码
第一部分css:
/***loading***/
.loading-box{ position:absolute; text-align:center;}
.loading-box .loading-message{ height:30px; line-height:30px; color:#999999;}
.sideslip{background-color:#f9f9f9; font-size:12px; color:#666666;position:relative;}
.scroll-box{ margin:1px auto 0px auto; }
第二部分jquery:
(function($,undefined){
$.widget('ui.loading', {
options: {
loadingStyle: { backgroundColor: '#F3F3F3' },
message: '任务加载中'
},
_create: function () {
this.html = '<div class="loading"><div class="loading-box"><div class="loading-img"><img src="/Images/282.GIF" width="32" height="32" alt=""/></div><div class="loading-message"></div></div></div>'; },
show: function () {
var wrapW = this.element.innerWidth(),
wrapH = this.element.innerHeight();
this.loadingHtml = $(this.html).appendTo(this.element).css(this.options.loadingStyle).css({ width: wrapW, height: wrapH, position: 'absolute', top: 0, left: 0 });
this.loadingHtml.find('.loading-box').position({ my: 'center center', at: 'center center-10%', of: this.loadingHtml });
this.loadingHtml.find('.loading-message').text(this.options.message); },
hide: function () {
if (this.loadingHtml != undefined) {
this.loadingHtml.remove();
}
}
});
})(jQuery)
第三部分调用:
这里需要说明下,首先需要初始化loading,如下面例子:
//初始化loading
$('.sideslip').loading();
最后通过window.setTimeOut()来设置延时时间,下面的例子是延迟两秒后隐藏loading
$('.sideslip').loading('show');
window.setTimeout(function () {
$('.sideslip').loading('hide');
}, 2000);
纯js+css实现loading等待效果的更多相关文章
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 手机站全局的html+css加载等待效果
本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...
- js+css实现模态层效果
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...
- 纯JS.CSS编写的可拖拽并左右分栏的插件(复制代码就能用)
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...
- (JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
- 纯JS写动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
- loading等待效果
效果预览:这两个球一直在转,不能进行其他操作 div放在最外层 <div id="loadingImg" style="height: 100%;width: 10 ...
- AJAX 的 Ajax返回数据之前的loading等待效果(gif效果等)
首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...
随机推荐
- MongoDB学习笔记~以匿名对象做为查询参数,方便查询子对象
回到目录 对于MongoDB的封装还在继续,对于不断追求简单的编程还在继续,对于喜欢代码的那么感觉,还在继续... 当你的mongo数据表里有子对象时,尤其是列表对象时,使用官方的驱动很是不爽,要记得 ...
- SQL Server中截取字符串常用函数
SQL Server 中截取字符串常用的函数: .LEFT ( character_expression , integer_expression ) 函数说明:LEFT ( '源字符串' , '要截 ...
- Nodejs以后台服务启动
1: 从网上查找 LINUX中我们可以使用这种简单的方式让node.js在后台运行: nohup node your_app.js & 经多次实验一直没有成功 2:使用 forever ...
- 按日子来干活——第一个Blog Day&Happy Day
今天(周一)看到一位同仁的生活规划,感觉挺适合我,实践一下,就theo&tools day+code day+blog day,间歇性有happy day嘛~ blog day这样做,一篇bl ...
- linux Shell脚本编码格式
在windows下开发,写好的shell脚本,放到linux上执行,往往会因为编码格式的问题存在兼容问题: -bash: ./lbs-circle-server.sh: /bin/sh^M: bad ...
- codePrinter
3天前,荆老师给了我一台打印机,让我完成省赛代码打印系统的测试. 打印机型号为 HP P1007,算是一台比较老的打印了. 本文记录了从打印机驱动安装到代码打印WEB部署的全过程 1. 安装打印机驱动 ...
- size_t和size_type
size_t和size_type是为了独立于及其而定义的类型,因为比如在一台电脑上int为2b,而另一台电脑上是4b,这样就给程序的可移植性带来了麻烦.为了解决这个问题,在库内定义了如上类型,其实si ...
- bzoj-4518 4518: [Sdoi2016]征途(斜率优化dp)
题目链接: 4518: [Sdoi2016]征途 Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地 ...
- 图像处理工具V1.0
图像处理工具V1.0(仿彗星图片处理工具.VS2015安装界面)----个人无聊作品 以下是界面: 部分代码一.(摘自网络----加水印代码): public static void ImageWat ...
- NOIP2013花匠
描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比较别致. 具体而言, ...