> 웹 프론트엔드 > JS 튜토리얼 > Javascript는 로딩 애니메이션 효과를 생성합니다. loading effect_javascript 기술

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

WBOY
풀어 주다: 2016-05-16 17:03:47
원래의
1929명이 탐색했습니다.

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

/*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 = $("");
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 () {
                                      ~ ~              

제가 사용하는 숙박 아이콘입니다. 직접 교체하실 수 있습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿