Jquery加载动画

效果图

一、使用方法$.openLoadForm([可选参数])显示加载动画

[可选参数]

1.不传参数的情况下，默认显示 加载中，请稍后。

2.传递参数 string会将将显示文字替换成传递的值。

3.传递参数 object即{ gif:'wait.gif', msg:'加载中，请稍后' }将使用自己定义的动画和文字

返回值 string当前加载层的唯一Id(16位)

**示例**【 任选一种适合的方式】

var openId=$.openLoadForm();//加载默认样式
var openId=$.openLoadForm("正在保存数据请稍后");//加载修改文字后的加载层
var openId=$.openLoadForm({ gif:'wait.gif', msg:'正在请求外部链接'   });//加载修改文字和动画的加载层

二、使用方法$.closeLoadForm([可选参数])关闭动画

[可选参数]

1.不传参数的情况下，关闭所有已打开的加载层

2.传递参数 string关闭指定的加载层，参数为打开加载层的返回值。

**示例**【 任选一种适合的方式】

$.closeLoadForm(); //关闭所有
$.closeLoadForm(openId); //关闭openId的加载动画

三、扩展方法$(selector).openLoadForm([option],[callback])监听指定元素的点击事件，再点击时显示动画

参数：option:  string会将将显示文字替换成传递的值。
                            object即{ gif:'wait.gif', msg:'加载中，请稍后' }将使用自己定义的动画和文字
        callback:【可选】回调函数，其参数会传递创建的加载层 openId
**示例**【 任选一种适合的方式】

 //为 id为show的按钮监听click事件，点击时显示动画
$("#show").openLoadForm();

//在显示时弹出显示openId
$("#show").openLoadForm(function(openId){
    alert(openId); 
});

//修改显示文字，并在显示时弹出显示openId
$("#show").openLoadForm("正在连接服务器，请稍后！",function(openId){
    alert(openId);
});

//修改显示文字和动画，并在显示时弹出显示openId
$("#show").openLoadForm({ gif:'wait.gif', msg:'正在请求外部链接'},function(openId){
    alert(openId);
});

插件代码

/**
 * 加载层
 * 依赖项: jquery.js 
 * 需引入jQuery文件
 * 作者：jpw
 * Q Q: 1427953302
 */

;
//闭包限定命名空间
(function ($) {
    //扩展jquery 方法
    $.fn.extend({
    	/***
    	 * 为制定标签创建点击加载层效果
    	 */
    	openLoadForm:function(msg,callback){
            if(typeof msg=="function"){
                callback=msg;
                msg={};
            }
    		$(this).on("click",function(){
                var index=$.openLoadForm(msg);
    			if(typeof callback=="function"){
    				callback(index);
    			}
    		});
    	},
    });


    $.extend({
        /**
         * 弹出加载层
         * 
         */
        openLoadForm:function(msg){
            if(typeof msg=="string"){
                msg={"msg":msg};
            }

            var option= $.extend({}, defoption, msg);  

            var uuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
              });
            //引入js文件
            var str=
		            '<div  class="loadForms" id="'+uuid+'"  style="cursor: not-allowed;width: 100%; height: 100%;position: fixed;z-index: 9999;background-color: rgba(235, 235, 235, 0.55);top: 0px;">'+
		            '    <div id="box_'+uuid+'" style="user-select: none;opacity: 1;width: auto;height: auto;display: block;padding: 0px;border: 1px solid #ccc;font-size: 18px;position: fixed;background-color: white;margin-top: 30%;    box-shadow: 1px 1px #cecece">'+
		            '		<div style="float:left;">'+
		            '	    	<img style="padding: 15px;width: 25px;" src="'+option["gif"]+'" _height="64" _width="64">'+
		            '		</div>'+
		            '		<div id="content_'+uuid+'" style="display: block;float:left;padding-top: 15px;padding-right: 37px;">'+option['msg']+'</div>'+
		            '   </div>            '+
		            '</div>';
            $("body").append(str);
            //计算并设置div的位置
            var width=$("body").width();
            var tinbW=$("#content_"+uuid).width();
            $("#box_"+uuid).css("left",width/2-tinbW/2);
            return uuid;
        },
        /**
         * 关闭加载层
         */
        closeLoadForm:function(index){
            if(!index){
                $(".loadForms").remove();
                return ;
            }
            $("#"+index).remove();
        },
    });
   var defoption={
       gif:'wait.gif',
       msg:'加载中，请稍后'
   }
    
})(window.jQuery);

附件