javascript制作loading動(dòng)畫效果 loading效果

更新時(shí)間：2014年01月14日 16:02:58 作者：

項(xiàng)目中多處要給ajax提交的時(shí)候增加等待動(dòng)畫效果，所以就寫了一個(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)畫結(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)用方法：

復(fù)制代碼代碼如下:

$("#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)，大家可以自行替換。

您可能感興趣的文章:

相關(guān)文章

九種原生js動(dòng)畫效果
這篇文章主要介紹了九種原生js動(dòng)畫效果，個(gè)個(gè)都非常精彩，都值得大家學(xué)習(xí)，需要的朋友可以參考下
2015-11-11
微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例
最近在做一個(gè)列表的時(shí)候，涉及到時(shí)間格式化操作。本文主要介紹了微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例，分享給大家，感興趣的可以了解一下
2021-07-07
ts封裝axios并處理返回值的實(shí)戰(zhàn)案例
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),下面這篇文章主要給大家介紹了關(guān)于ts封裝axios并處理返回值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲
最近利用Javascript實(shí)現(xiàn)了一個(gè)小游戲，覺(jué)著還不錯(cuò)，所以分享給大家，下面這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
給easyui datebox擴(kuò)展一個(gè)清空的實(shí)例
下面小編就為大家?guī)?lái)一篇給easyui datebox擴(kuò)展一個(gè)清空按鈕的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
ionic在開(kāi)發(fā)ios系統(tǒng)微信時(shí)鍵盤擋住輸入框的解決方法(鍵盤彈出問(wèn)題)
在使用ionic開(kāi)發(fā)ios系統(tǒng)微信的時(shí)候遇到一個(gè)bug，在填寫表單的時(shí)候鍵盤會(huì)擋住輸入框。下面小編給大家?guī)?lái)了ionic在開(kāi)發(fā)ios系統(tǒng)微信時(shí)鍵盤擋住輸入框的解決方法(鍵盤彈出問(wèn)題)，非常不錯(cuò)，有需要的朋友參考下吧
2016-09-09
設(shè)為首頁(yè)和收藏的Javascript代碼(親測(cè)兼容IE,Firefox,chrome等瀏覽器)
這篇文章主要介紹了設(shè)為首頁(yè)和收藏的Javascript代碼(親測(cè)兼容IE,Firefox,chrome等瀏覽器)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例
下面小編就為大家?guī)?lái)一篇原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
僅Firefox中鏈接A無(wú)法實(shí)現(xiàn)模擬點(diǎn)擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫的事件模塊在Firefox5中無(wú)法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法，因此模擬點(diǎn)擊直接調(diào)用click方法即可。
2011-07-07
讓您的菜單不離網(wǎng)站
讓您的菜單不離網(wǎng)站...
2006-10-10