首页 > Web开发 > 详细

javascript 通用loading动画效果

时间:2014-01-16 00:23:16      阅读:548      评论:0      收藏:0      [点我收藏+]

由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法;

 

代码如下:

bubuko.com,布布扣
/*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); } };
bubuko.com,布布扣

调用方法:

bubuko.com,布布扣
        $("#elementid").click(function (e) { 
  var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
            //alert("提交成功!"); 
            obj.stop();//隐藏加载图标
        });
  obj.start();
        });    
bubuko.com,布布扣

 

bubuko.com,布布扣 我用的loding图标,大家可以自行替换;

 

实现很简单,没有考虑什么性能、标准什么的;还有很多不完善,有更好的欢迎交流;

javascript 通用loading动画效果

原文:http://www.cnblogs.com/crith/p/3517373.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!