Home > Web Front-end > JS Tutorial > Javascript creates loading animation effect loading effect_javascript skills

Javascript creates loading animation effect loading effect_javascript skills

WBOY
Release: 2016-05-16 17:03:47
Original
1928 people have browsed it

Copy code The code is as follows:

/*Delayed waiting effect of ajax submission*/

var AjaxLoding = new Object();

//wraperid: Container element that displays the loding image
//ms: Indicates the duration of the loding icon display, milliseconds
//envent: Represents the event source object of the launching event, used to obtain the object of the launching event
//callback: Indicates the callback method executed after the animation ends
//stop() method indicates the operation of hiding the animation executed after the callback method is successfully executed
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; //Display the parent element of the loding icon
this.obj = $("#" this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
 this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
//Default will The icon is centered and displayed with lodingid. Set the following style
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();
       }); sourceEventElement.attr("disabled", false);
}
};




Calling method:


Copy code

The code is as follows:$("#elementid" ).click(function (e) { var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {
                                                                                                                                    
                                                                                                                                                                                    

This is the loding icon I use, you can replace it yourself.
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template