javascript制作loading动画效果 loading效果


Posted in Javascript onJanuary 14, 2014
/*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);
    }
};

调用方法:

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

javascript制作loading动画效果 loading效果这是我用的loding图标,大家可以自行替换。

Javascript 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 #Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 #Javascript
将查询条件的input、select清空
Jan 14 #Javascript
js导出txt示例代码
Jan 14 #Javascript
javascript 通用loading动画效果实例代码
Jan 14 #Javascript
jquery操作cookie插件分享
Jan 14 #Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 #Javascript
You might like
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
基于python实现KNN分类算法
2020/04/23 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
亿企通软件测试面试题
2012/04/10 面试题
2014法制宣传日活动总结
2014/07/09 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
大国崛起日本观后感
2015/06/02 职场文书
教师病假条范文
2015/08/17 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang