javascript制作loading動畫效果 loading效果
/*ajax提交的延時等待效果*/
var AjaxLoding = new Object();
//wraperid : 顯示loding圖片的容器元素
//ms:表示loding圖標顯示的時長,毫秒
//envent:表示出發(fā)事件的事件源對象,用于獲得出發(fā)事件的對象
//callback:表示動畫結(jié)束后執(zhí)行的回掉方法
//stop()方法表示在回掉方法執(zhí)行成功后執(zhí)行的隱藏動畫的操作
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顯示,設(shè)置如下樣式
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);
}
};
調(diào)用方法:
$("#elementid").click(function (e) {
var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
//alert("提交成功!");
obj.stop();//隱藏加載圖標
});
obj.start();
});
這是我用的loding圖標,大家可以自行替換。
相關(guān)文章
ionic在開發(fā)ios系統(tǒng)微信時鍵盤擋住輸入框的解決方法(鍵盤彈出問題)
在使用ionic開發(fā)ios系統(tǒng)微信的時候遇到一個bug,在填寫表單的時候鍵盤會擋住輸入框。下面小編給大家?guī)砹薸onic在開發(fā)ios系統(tǒng)微信時鍵盤擋住輸入框的解決方法(鍵盤彈出問題),非常不錯,有需要的朋友參考下吧2016-09-09
設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)
這篇文章主要介紹了設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
原生js 封裝get ,post, delete 請求的實例
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
僅Firefox中鏈接A無法實現(xiàn)模擬點擊以觸發(fā)其默認行為
偶然發(fā)現(xiàn)之前寫的事件模塊在Firefox5中無法觸發(fā)A的默認行為了。IE/Opera/Firefox5中A具有click方法,因此模擬點擊直接調(diào)用click方法即可。2011-07-07

