javascript 通用loading動(dòng)畫(huà)效果實(shí)例代碼
由于項(xiàng)目中多處要給ajax提交的時(shí)候增加等待動(dòng)畫(huà)效果,所以就寫(xiě)了一個(gè)簡(jiǎn)單的通用js方法;
代碼如下:
/*ajax提交的延時(shí)等待效果*/
var AjaxLoding = new Object();
//wraperid : 顯示loding圖片的容器元素
//ms:表示loding圖標(biāo)顯示的時(shí)長(zhǎng),毫秒
//envent:表示出發(fā)事件的事件源對(duì)象,用于獲得出發(fā)事件的對(duì)象
//callback:表示動(dòng)畫(huà)結(jié)束后執(zhí)行的回掉方法
//stop()方法表示在回掉方法執(zhí)行成功后執(zhí)行的隱藏動(dòng)畫(huà)的操作
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圖標(biāo)的parent元素
this.obj = $("#" + this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//默認(rèn)將圖標(biāo)居中與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();//隱藏加載圖標(biāo)
});
obj.start();
});
我用的loding圖標(biāo),大家可以自行替換;
實(shí)現(xiàn)很簡(jiǎn)單,沒(méi)有考慮什么性能、標(biāo)準(zhǔn)什么的;還有很多不完善,有更好的歡迎交流;
- iOS動(dòng)畫(huà)教你編寫(xiě)Slack的Loading動(dòng)畫(huà)進(jìn)階篇
- 一步步教你寫(xiě)Slack的Loading動(dòng)畫(huà)
- Android自定義加載loading view動(dòng)畫(huà)組件
- Android實(shí)現(xiàn)創(chuàng)意LoadingView動(dòng)畫(huà)效果
- 一看就喜歡的loading動(dòng)畫(huà)效果Android分析實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁(yè)加載條loading動(dòng)畫(huà)
- 三款A(yù)ndroid炫酷Loading動(dòng)畫(huà)組件推薦
- Winform圓形環(huán)繞的Loading動(dòng)畫(huà)實(shí)現(xiàn)代碼
- javascript制作loading動(dòng)畫(huà)效果 loading效果
- loading動(dòng)畫(huà)特效小結(jié)
相關(guān)文章
顯示今天的日期js代碼(陽(yáng)歷和農(nóng)歷)
這篇文章主要介紹了Js中顯示日期和農(nóng)歷的代碼,很簡(jiǎn)單,但很實(shí)用,有圖片,需要的朋友可以參考下2014-09-09
基于JavaScript實(shí)現(xiàn)一個(gè)月餅音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的月餅音樂(lè)播放器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以嘗試一下2022-09-09
JavaScript定時(shí)器和優(yōu)化的取消定時(shí)器方法
這篇文章主要介紹了JavaScript定時(shí)器和優(yōu)化的取消定時(shí)器方法,本文著重講解一個(gè)優(yōu)化的取消定時(shí)器的方法,需要的朋友可以參考下2015-07-07
JavaScript 模塊化語(yǔ)法 import、export示例詳解
ES6 模塊化 (import / export) 是 JavaScript 官方推薦的模塊化方案,解決了 代碼復(fù)用、作用域管理、依賴管理 等問(wèn)題,本文給大家介紹了JavaScript 模塊化語(yǔ)法 import、export示例代碼,感興趣的朋友一起看看吧2025-04-04
JS對(duì)大量數(shù)據(jù)進(jìn)行多重過(guò)濾的方法
今天在工作中遇到一個(gè)問(wèn)題,當(dāng)前端通過(guò)Ajax從后端取得了大量的數(shù)據(jù),需要根據(jù)一些條件過(guò)濾,但是發(fā)現(xiàn)寫(xiě)的過(guò)濾方法有問(wèn)題,后來(lái)仔細(xì)的查找問(wèn)題,通過(guò)網(wǎng)上的資料終于解決了這個(gè)問(wèn)題,現(xiàn)在將解決的過(guò)程以及解決方法分享給大家,有需要的朋友們可以參考借鑒。2016-11-11

