标签：加载 idt jquery infinite app key inf width gets
$.LoadEvents("showLoading",$("#tt"),"#902D2D");
$.LoadEvents("hideLoading",$("#tt"));
原生代码：
!(function ($) { $.extend({ "LoadEvents": function (eventType, $parent, loadColor, bgColor, opacity, fn) { switch (eventType) { case "showLoading": { if($(document.head).find(‘#css_loader‘).length == 0){ $(document.head).append(‘<link rel="stylesheet" type="text/css" id="css_loader" href="loader.css">‘); } var loaderTargets = []; var $body = $(document.body); var _bgColor = ‘rgba(238,238,238,0.5)‘; var _opacity = 1; var _loadColor = ‘#67CF22‘; if (typeof(bgColor) != "undefined") { _bgColor = bgColor; } if(typeof(opacity) != "undefined") { _opacity = opacity; } if($parent.find("#events_loader").length == 0){ // 可以有多个加载实例，所以需要用loaders管理 var $loader = $("<div id=‘events_loader‘></div>").css({ background: _bgColor, opacity:_opacity, position: ‘absolute‘, top: 0, left: 0, width: ‘100%‘, height: ‘100%‘ }); // loading动画 var $icon = $(‘<div class="spinner">‘+ ‘<div class="rect1"></div>‘+ ‘<div class="rect2"></div>‘+ ‘<div class="rect3"></div>‘+ ‘<div class="rect4"></div>‘+ ‘<div class="rect5"></div>‘+ ‘</div>‘); if(typeof(loadColor) != "undefined") { _loadColor = loadColor; } $icon.children().css({"background":_loadColor}); $loader.append($icon); $parent.append($loader); } break; } case "hideLoading": { $parent.find("#events_loader").remove(); break } } } }) })(jQuery);
CSS
.spinner { width: 60px; height: 60px; text-align: center; font-size: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .spinner > div { height: 100%; width: 6px; display: inline-block; margin-left: 6px; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
实现效果
引伸：$.extend({}),(function(){})(jQuery)的使用;
$.extend()深拷贝，浅拷贝的作用；
因为其本身存在一些重载原型
举个栗子：
var dog1={height:"60cm",age:3,color:{head:"yellow",body:"white"}};
var dog2={sex:"female",color:{body:"red"}};
var dog=$.extend(dog1,dog2);//默认false
var dog1=$.extend(true,dog1,dog2);
var dog2=$.extend(false,dog1,dog2);
//输出结果：
dog={height:"60cm",age:3,sex:"female",color:{body:"red"}};
dog1={height:"60cm",age:3,sex:"female",color:{head:"yellow",body:"red"}};
dog2={height:"60cm",age:3,sex:"female",color:{body:"red"}};
(function(){})(jQuery)有关匿名立即执行函数的理解；
(function(arg){...})(param),这个定义了一个带有arg参数的匿名函数，然后再通过param方法调用执行；
其实也就是相当于Var fuc = function(){};fn(param)。Jquery也是一样的操作。
$.extend()还可以针对jquery进行二次自定义封装方法
当你想要开发一个公用插件的时候就可以通过这种方式结合实现。
比如我想要将原生的js属性封装到自己的jquery里面去
举个栗子：将原生的document.getElementsByTagName封装给jquery去使用
JS模块
(function($){
$.extend({
"getTagname" : function(colval){
var tagname = document.getElementsByTagName(colval);
return tagname;
}
});
})(jQuery);
var tagval = $.getTagname("h1")[0];
console.log("tagval="+tagval.innerText);
Html模块
<h1>黄大大</h1>
上诉的LoadEvents也是同样的方法来封装实现的，主要介绍原理，实现可以自己尝试或留言询问。
标签：加载 idt jquery infinite app key inf width gets
原文地址：https://www.cnblogs.com/b-code/p/9042432.html
