javascript制作loading動(dòng)畫效果 loading效果
/*ajax提交的延時(shí)等待效果*/
var AjaxLoding = new Object();
//wraperid : 顯示loding圖片的容器元素
//ms:表示loding圖標(biāo)顯示的時(shí)長(zhǎng),毫秒
//envent:表示出發(fā)事件的事件源對(duì)象,用于獲得出發(fā)事件的對(duì)象
//callback:表示動(dòng)畫結(jié)束后執(zhí)行的回掉方法
//stop()方法表示在回掉方法執(zhí)行成功后執(zhí)行的隱藏動(dòng)畫的操作
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),大家可以自行替換。
- js實(shí)現(xiàn)動(dòng)畫特效的文字鏈接鼠標(biāo)懸停提示的方法
- js+css實(shí)現(xiàn)文字散開(kāi)重組動(dòng)畫特效代碼分享
- 利用JS實(shí)現(xiàn)文字的聚合動(dòng)畫效果
- JS動(dòng)畫效果代碼3
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(2.5K)
- JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫效果的方法
- js動(dòng)畫(animate)簡(jiǎn)單引擎代碼示例
- JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
- javascript與css3動(dòng)畫結(jié)合使用小結(jié)
- js實(shí)現(xiàn)類似jquery里animate動(dòng)畫效果的方法
- JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫文字效果示例
相關(guān)文章
javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問(wèn)題
今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問(wèn)題,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-0180行代碼寫一個(gè)Webpack插件并發(fā)布到npm
最近在學(xué)習(xí) Webpack 相關(guān)的原理,本文用80行代碼寫一個(gè)Webpack插件并發(fā)布到npm,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說(shuō)明的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說(shuō)明的方法,涉及js操作鼠標(biāo)事件的使用技巧,需要的朋友可以參考下2015-02-02微信小程序 網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07easyui關(guān)于validatebox實(shí)現(xiàn)多重規(guī)則驗(yàn)證的方法(必看)
下面小編就為大家?guī)?lái)一篇easyui關(guān)于validatebox實(shí)現(xiàn)多重規(guī)則驗(yàn)證的方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
項(xiàng)目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2022-12-12