Javascript는 로딩 애니메이션 효과를 생성합니다. loading effect_javascript 기술

코드 복사 코드는 다음과 같습니다.

/*Ajax 제출 지연 효과* /

var AjaxLoding = new Object();

//wraperid: 로딩 이미지를 표시하는 컨테이너 요소
//ms: 로딩 아이콘 표시 기간(밀리초)을 나타냅니다.
//envent: 런칭 이벤트의 이벤트 소스 객체를 나타내며, 런칭 이벤트의 객체 획득
//콜백: 애니메이션 종료 후 실행되는 콜백 메소드를 나타냅니다.
//stop() 메소드는 콜백 메소드가 성공적으로 실행된 후 실행되는 애니메이션을 숨기는 동작을 나타냅니다.
AjaxLoding.load = function(lodingid, ms,event,left,top,callback){

if (!left || typeof left == 정의되지 않음)
left = 0;
if (! 상단 || 유형 상단 == 정의되지 않음 )
상단 = 0;

this.lodingid = lodingid; //로딩 아이콘의 상위 요소 표시
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({ 왼쪽: this.obj.width() / 2-imgobj.width()/2-left, 위쪽: this.obj. 높이() / 2- imgobj.height()/2-top });
imgobj.appendTo(this.obj);
this.obj.animate({height:this.obj.height()} , ms, function () {
        콜백();
       }) sourceEventElement.attr("disabled", false);
}
};

호출 방법:

코드 복사

코드는 다음과 같습니다.$(" #elementid" ).click(function (e) { var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {

                                      ~ ~              

제가 사용하는 숙박 아이콘입니다. 직접 교체하실 수 있습니다.