• 技术文章 >web前端 >js教程

    javascript 通用loading动画效果实例代码_javascript技巧

    2016-05-16 17:03:55原创852

    由于项目中多处要给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 = $("");
    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图标,大家可以自行替换;

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:loading 动画效果
    上一篇:javascript日期对象格式化为字符串的实现方法_javascript技巧 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 聊聊Node.js中怎么用async函数• 聊聊Node项目中怎么操作MySQL• 一文聊聊Angular中的依赖注入• react native路由跳转怎么实现• Node实战学习:浏览器预览项目所有图片
    1/1

    PHP中文网