本文為原創文章,轉載請注明出處,謝謝。
/**
* @author samkin.yang
* @version 1.0
*/
var $_yxj = new SamkinLoading();

(function($){
if($){
$.fn.extend({
showLoading : function(){
$_yxj.showLoading($(this).attr("id"));
},
hideLoading : function(){
$_yxj.hideLoading($(this).attr("id"));
}
});
}
})(jQuery);

function DomInfo(i,t,l,w,h){
this.id = i;
this.offsetTop = t;
this.offsetLeft = l;
this.width = w;
this.height = h;
};

function SamkinLoading(){
this.iconUrlPrix = "";
this.loading = function(domId){

};
this.getLoadingDivInfo = function(domId) {
var dom = document.getElementById(domId);
var t=dom.offsetTop;
var l=dom.offsetLeft;
var domHeight = dom.clientHeight;
var domWidth = dom.clientWidth;
while(dom=dom.offsetParent){
t+=dom.offsetTop;
l+=dom.offsetLeft;
}
return new DomInfo(domId,t,l,domWidth,domHeight);
};
this.createDiv = function(domId){
var domInfo = this.getLoadingDivInfo(domId);
var bottomDiv;// = document.createElement("div");

bottomDiv = document.getElementById("loadingDiv_" + domId);
if(!bottomDiv) {
bottomDiv = document.createElement("div");
bottomDiv.setAttribute("id", "loadingDiv_"+domInfo.id);
var topDiv = document.createElement("div");
topDiv.className = "samkin-loading-top-div";
bottomDiv.appendChild(topDiv);
document.body.appendChild(bottomDiv);
}
// newNode.style.filter =
// "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
// newNode.style.filter = "Alpha(Opacity=50, FinishOpacity=100, Style=1,
// StartX=0, StartY=0, FinishX=100, FinishY=140)";

bottomDiv.style.top = domInfo.offsetTop + "px";
bottomDiv.style.left = domInfo.offsetLeft + "px";
bottomDiv.style.width = domInfo.width + "px";
bottomDiv.style.height = domInfo.height + "px";

bottomDiv.setAttribute("class", "samkin-loading-bottom-div");
bottomDiv.className = "samkin-loading-bottom-div";
bottomDiv.style.display = document.getElementById(domInfo.id).style.display;

// bottomDiv.style.backgroundImage = "url('" + this.iconUrlPrix
// +"/images/star.gif')";
/*
* if(this.isIE()){ //bottomDiv.style.filter =
* "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
* //bottomDiv.style.filter = "Alpha(Opacity=50, FinishOpacity=100,
* Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)";
* bottomDiv.style.filter = "Alpha(Opacity=20)"; } else {
* bottomDiv.style.opacity = "0.2"; }
*/

};
this.isIE = function() {
if(document.body.addEventListener) // W3C
{
return false;
}
else if(document.body.attachEvent) // IE
{
return true;
}
};
this.showLoading = function(domId){
/*
* var dom = document.getElementById("loadingDiv_" + domId); if(dom) {
* dom.style.display = "block"; } else { var domInfo =
* this.getLoadingDivInfo(domId); this.createDiv(domInfo); }
*/
this.createDiv(domId);
};
this.hideLoading = function(domId){
var dom = document.getElementById("loadingDiv_" + domId);
if(dom) {
dom.style.display = "none";
}
};
this.createLoadingObj = function(domId){
return
};

this.test = function(domId){
this.showLoading(domId);
};
};

使用方法,
如果在引入了jQuery環境下,可以這樣使用:
顯示遮罩層:$("#id").showLoading();
去除遮罩層:$("#id").hideLoading();

如果沒有引入jQuery的時候可以這樣用:
顯示遮罩層:$_yxj.showLoading('id');
去除遮罩層:$_yxj.hideLoading('id');
@CHARSET "BIG5";
.samkin-loading-bottom-div {
position: absolute;
width: 100px;
height: 60px;
background-color: black;
overflow: hidden;
display: block;
opacity:0.8;/* w3c */
filter:alpha(opacity=80);/* ie */
}

.samkin-loading-top-div {
clear:both;
width:100%;
height:100%;
background: url('images/two-circle.gif') white no-repeat center;
}

自己寫的 Loading JS插件的更多相关文章

  1. H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多

    前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...

  2. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  3. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

  4. js插件---layer.js使用体验是怎样

    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...

  5. js插件---jqGrid插件如何使用

    js插件---jqGrid插件如何使用 一.总结 一句话总结:jqdrid还是依赖加js初始化的方式,很多时候插件的问题一般都是引入的css和js的问题,jqgrid里面遇到的问题就是下载包有一些js ...

  6. amazeui学习笔记--js插件(UI增强2)--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  7. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  8. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  9. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

随机推荐

  1. [Android] 输入系统(二)

    在上一篇文章的最后,我们发现InputDispatcher是调用了InputChannel->sendMessage把键值发送出去,那么相应的,也有接收键值的地方.接收函数是InputChann ...

  2. Chapter 7 Backup and Recovery 备份和恢复:

    Chapter 7 Backup and Recovery 备份和恢复: Table of Contents 7.1 Backup and Recovery Types 7.2 Database Ba ...

  3. 【转】android 中如何限制 EditText 最大输入字符数

    原文网址:http://blog.csdn.net/fulinwsuafcie/article/details/7437768 方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:andr ...

  4. (转载)APC支持php5.4了

    (转载)http://www.neatstudio.com/archives/?article-2061.html 时隔一年多,APC终于又更新了,这次更新最大的就是支持PHP5.4:- Add PH ...

  5. 【转】HP(惠普)大中华区总裁孙振耀退休感言

    一.关于工作与生活我有个有趣的观察,外企公司多的是25-35岁的白领,40岁以上的员工很少,二三十岁的外企员工是意气风发的,但外企公司40岁附近的经理人是很尴尬的.我见过的40岁附近的外企经理人大多在 ...

  6. Java---练习:文件切割与合并(1)

    实现对大文件的切割与合并. 按指定个数切(如把一个文件切成10份)或按指定大小切(如每份最大不超过10M),这两种方式都可以. 示例程序说明: 文件切割:把一个文件切割成多个碎片,每个碎片的大小不超过 ...

  7. 基于Minifilter框架的文件过滤驱动理解

    概述 Minifilter即File System Minifilter Drivers,是Windows为了简化第三方开发人员开发文件过滤驱动而提供的一套框架,这个框架依赖于一个称之为Filter ...

  8. C#实现数据结构——线性表(上)

    什么是线性表 数据结构中最常用也最简单的应该就是线性表,它是一种线性结构(废话,不是线性结构怎么会叫线性表?当然不是废话,古人公孙龙就说白马非马,现代生物学家也说鲸鱼不是鱼). 那什么是线性结构? 按 ...

  9. 自然语言.例如:求n!。

    (1).定义3个变量i.n及mul,并为i和mul均赋初值为1. (2).从键盘中输入一个数赋给n. (3).将mul乘以i的结果赋给mul. (4)i的值加1,判断i的值是否大于n.如果大于n,则执 ...

  10. WASD控制UI界面血条加减

    using UnityEngine; using System.Collections; using UnityEngine.UI; public class HealthController : M ...