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 相关文章推荐
javascript初学者常用技巧
Sep 02 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
关于vue-router的那些事儿
May 23 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
前端JavaScript大管家 package.json
Nov 02 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Vue动态获取width的方法
2018/08/22 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python实现自动发送邮件
2018/06/20 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
销售文员的岗位职责
2013/11/20 职场文书
职工运动会邀请函
2014/01/19 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
法人授权委托书范本
2014/09/17 职场文书
病危通知单
2015/04/17 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Elasticsearch 基本查询和组合查询
2022/04/19 Python