> 웹 프론트엔드 > JS 튜토리얼 > 간단한 jquery 진행률 표시줄 example_jquery

간단한 jquery 진행률 표시줄 example_jquery

WBOY
풀어 주다: 2016-05-16 16:50:55
원래의
1328명이 탐색했습니다.

10줄 미만의 코드로 jQuery로 구현된 가장 간단한 진행률 표시줄입니다. 스타일을 직접 무시할 수 있습니다. (직접 찾아야 할 사진이 있습니다)

간단한 jquery 진행률 표시줄 example_jquery

[CSS] 코드

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

$(function(){
var i=0;
(function ProgressBar(){
i=i 1;
if(i>=101){
i =0;
}
$("#proc").animate({width:i "%"},500);
$("#progressWord").text(i " %") ;
setTimeout(progressBar,1500);
})();
});

[CSS] 코드

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

.progress_out {
위치:상대적;
테두리:1px 단색 #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
상자 그림자: #666 0px 0px 3px;
너비:200px;
높이:40px;
}
.progress_inner{
배경색: #DADAE4;
너비: 100%;
높이: 40px;
}
.progress_word{
위치:절대;
왼쪽:50%;
위쪽:24%;
글꼴- 무게: 굵은 글씨 ;
}

[HTML] 코드

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

< div id= "outDiv" class="progress_out">



0%

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