自己寫的 Loading JS插件

本文為原創文章，轉載請注明出處，謝謝。/** * @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;}

转载于:https://www.cnblogs.com/CHEUNGKAMING/p/4895347.html

相关资源：自定义vue的loading插件