萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript制作loading動畫效果

javascript制作loading動畫效果

 項目中多處要給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();         });      
copyright © 萬盛學電腦網 all rights reserved