javascript 通用loading动画效果实例代码

前端技术 2023/09/07 JavaScript

由于项目中多处要给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);
    }
};

本文地址:https://www.stayed.cn/item/18438

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。