javascript製作loading動畫效果 loading效果_javascript技巧

複製程式碼 程式碼如下:

/*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)
       )
        top = 0;

    this.lodingid = lodingid; //顯示loding圖示的parent元素

    this.obj = $("#" this.lodingid);
    this.sourceEventElement=$N$id; >    this.start = function () {
　　　　　　this.obj.css({positin:"relative"});
        this.sourceEventElement.attr("disabled",true);
        //默認將圖示居中與lodingid顯示​​，設定如下樣式
        var imgobj = $("");
        imgobj.css({ left: this.obj.width() / 2-imgobj.width()/2-left, top: this.obj.height() / 2-height height()/2-top });
        imgobj.appendTo(this.obj);
       ,this.obj.animate({height:this.obj.height). 🎜>            callback();
        });
    };        this.sourceEventElement. attr("disabled", false);
    }
};





呼叫方法：

複製程式碼

程式碼如下:$("#elementid" ).click(function (e) {   var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {       

            obj.stop();//隱藏式載入圖示

        });
  

這是我用的loding圖標，大家可以自行替換。