加载等待loading
自己写的一个小插件,还有很多需要完善。。。
(function ($) {
$.fn.StartLoading = function (option) {
var defaultVal = {
loadgif: 'image/loading.gif',
backcolor: 'white',
picheight: 50,
picwidth: 50,
fullshowpic: false,//图片是否设置透明度
opacity: 0.5,
timeout: 3000
}
var result = $.extend({}, defaultVal, option);
var $obj = $(this);//选择器的Jquery对象
var iswndordoc = false;
if ($(this).get(0) == document || $(this).get(0) == window || $(this).get(0) == document.body) {
iswndordoc = true;
$obj = $(document.body);
}
//获取对象属性
var constClone = {
constwidth: $obj.width(),
constheight: $obj.height(),
constleft: iswndordoc == true ? 0 : $obj.offset().left,
consttop: iswndordoc == true ? 0 : $obj.offset().top
}
if (iswndordoc) {
var $clonebottom = $("<div></div>");
} else {
if ($(this)[0].tagName != "div") {
var $objTemp = $("<div id=\"_temp_div\" style=\"width:" + constClone.constwidth + "; height:" + constClone.constheight + "; left:" + constClone.constleft + "; top:" + constClone.consttop + "\"></div>");
$($obj.parent().get(0)).append($objTemp);
$obj = $objTemp;
}
//生成最底层DIV
var $clonebottom = $obj.clone().removeAttr("id").removeAttr("class").removeAttr("name");
}
//设置最底层DIV属性
$clonebottom.removeClass().removeAttr("style").empty().css({
"position": "absolute",
"left": constClone.constleft,
"top": constClone.consttop,
"z_index": "10000",
"width": constClone.constwidth,
"height": constClone.constheight,
"background-color": "transparent"
});
var $cloneTop = $clonebottom.clone().css({ "z_index": "9999", "background-color": "" + result.backcolor + "", "position": "" });
$clonebottom.append($cloneTop);
$clonebottom.append("<img id=\"_loading_plugin\" src=\"" + result.loadgif + "\" style=\"position:absolute;z_index: 9999\"/>");
if (iswndordoc) {
$obj.append($clonebottom);
} else {
$($obj.parent().get(0)).append($clonebottom);
}
var $imgloading = $("#_loading_plugin");
$imgloading.css({ "width": "" + result.picwidth + "px", "height": "" + result.picheight + "px" });
$imgloading.css({ "left": (constClone.constwidth - $imgloading.width()) / 2, "top": (constClone.constheight - $imgloading.height()) / 2 });
if (result.fullshowpic)
$clonebottom.css("opacity", "" + result.opacity + "");
else
$cloneTop.css("opacity", "" + result.opacity + "");
var hand = setTimeout(function () {
$clonebottom.fadeOut("slow", function () {
$(this).remove();
clearTimeout(hand);
});
}, result.timeout)
return $clonebottom;
}
$.fn.StopLoading = function () {
var $globalthis = $(this);
$globalthis.remove()
}
})(jQuery)
用法: 开始显示 var $load = $(window).StartLoading({ timeout: 1000000, fullshowpic: true }); 结束显示: $load.StopLoading();
加载等待loading的更多相关文章
- [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- vue-element-admin 全局loading加载等待
最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- IOS开发UI篇之──自定义加载等待框(MBProgressHUD)
本文转载至 http://blog.csdn.net/xunyn/article/details/8064984 原文地址http://www.189works.com/article-89289 ...
- WPF加载等待动画
原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- C#窗体的加载等待(BackgroundWorker控件)实现
窗体拉一个Button按钮和一个加载等待显示的label, label默认隐藏,点击按钮时显示这个label,加载完再隐藏 1.工具箱拉BackgroundWorker控件到窗体 2.backgrou ...
- cocos2d-x游戏开发(十五)游戏加载动画loading界面
个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
随机推荐
- offsetLeft,Left,clientLeft具体解释
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上側位置,整型,单位像素. obj.offsetLe ...
- 【大话QT之十】实现FTP断点续传
应用需求: 网盘开发工作逐步进入各部分的整合阶段,当用户在client改动或新添加一个文件时.该文件要同步上传到server端相应的用户文件夹下,因此针对传输数据(即:上传.下载)这一块如今既定了三种 ...
- caffe中LetNet-5卷积神经网络模型文件lenet.prototxt理解
caffe在 .\examples\mnist文件夹下有一个 lenet.prototxt文件,这个文件定义了一个广义的LetNet-5模型,对这个模型文件逐段分解一下. name: "Le ...
- [HEOI2016/TJOI2016] 排序 解题报告(二分答案/线段树分裂合并+set)
题目链接: https://www.luogu.org/problemnew/show/P2824 题目描述: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在 ...
- (一)Eureka 服务的注册与发现
(一)服务的注册于发现(eureka); Eureka Server: 服务注册中心,负责服务列表的注册.维护和查询等功能 在Idea里,新建项目,选择Spring initializer. 下面的p ...
- POJ 3693 后缀数组+RMQ
思路: 论文题 后缀数组&RMQ 有一些题解写得很繁 //By SiriusRen #include <cmath> #include <cstdio> #includ ...
- SharePoint 使用Expression Web 设计网站
创建好网站以后可就可以开始发布了 possible causes : 1.The web server may not hava the FrontPage Server Extensions ins ...
- 51nod 1179 最大的最大公约数 (打表计数法)
题目: 考虑清楚就简单了,我们把每个数的因子计数. 两个数的公约数就是计数超过2的数,然后找到最大的那个就好了. 计算每个数的素因子,记得sqrt(),不然会超时. 打表计数法时间复杂度O(n*sqr ...
- 1,http协议的细节部分学习
http协议(80端口)https(443端口) 主要是一直对三次握手模模糊糊,并且抓包的时候不知道那些Accept.User-Agent什么意思,就仔细找课程学了一下. 学习简介: 1,涉及工具(w ...
- 关于RoI pooling 层
ROIs Pooling顾名思义,是pooling层的一种,而且是针对ROIs的pooling: 整个 ROI 的过程,就是将这些 proposal 抠出来的过程,得到大小统一的 feature ma ...