首頁 > web前端 > js教程 > javascript 通用loading動畫效果實例程式碼_javascript技巧

javascript 通用loading動畫效果實例程式碼_javascript技巧

WBOY
發布: 2016-05-16 17:03:55
原創
1452 人瀏覽過

由於專案中多處要給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)
       )
        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圖標,大家可以自行替換;

實作很簡單,沒有考慮什麼效能、標準什麼的;還有很多不完善,有更好的歡迎交流;
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板