您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

javascript制作loading动画效果

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法,大家参考使用吧 

  代码如下: /*ajax提交的延时等待效果*/   var AjaxLoding = new Object();   //wraperid : 显示loding图片的容器元素 //ms:表示loding图标显示的时长,毫秒 //envent:表示出发事件的事件源对象,用于获得出发事件的对象 //callback:表示动画结束后执行的回掉方法 //stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作 AjaxLoding.load = function(lodingid,ms,event,left,top,callback){       if (!left || typeof left == undefined)         left = 0;     if (!top || typeof top == undefined)         top = 0;       this.lodingid = lodingid; //显示loding图标的parent元素     this.obj = $("#" + this.lodingid);     this.sourceEventElement=$(event.currentTarget);     this.start = function () {       this.obj.css({positin:"relative"});         this.sourceEventElement.attr("disabled",true);         //默认将图标居中与lodingid显示,设置如下样式         var imgobj = $("<img src='/images/loaderc.gif' style='position:absolute; width:32px; height:32px;' id='img_loding'/>");          imgobj.css({ left: this.obj.width() / 2-imgobj.width()/2-left, top: this.obj.height() / 2-imgobj.height()/2-top });         imgobj.appendTo(this.obj);         this.obj.animate({height:this.obj.height()}, ms, function () {             callback();          });     };     this.stop = function () {          $("#img_loding").remove();         this.sourceEventElement.attr("disabled", false);     } };       调用方法:   代码如下: $("#elementid").click(function (e) {    var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {             //alert("提交成功!");              obj.stop();//隐藏加载图标         });   obj.start();         });