javascript 通用loading动画效果实例代码_Javascript教程-查字典教程网
javascript 通用loading动画效果实例代码
javascript 通用loading动画效果实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法;代码如下:复制代码代码如下:/*ajax提交的延时等...

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

代码如下:

复制代码 代码如下:

/*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='http://www.jb51.netimages/loaderc.gif' 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);

}

};

调用方法:

复制代码 代码如下:

$("#elementid").click(function (e) {

var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {

//alert("提交成功!");

obj.stop();//隐藏加载图标

});

obj.start();

});

我用的loding图标,大家可以自行替换;

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类