자신의 스킬이 어느 정도인지를 나타내는 이른바 스킬바(Skill-bar)를 한 번 만들어보자.
우선 기본적인 bar를 구성해보자.
<실행 화면>
위와 같은 Skill-bar를 생성해주었다.
(여기서 skill-bar 막대기의 %를 확인시켜주기 위해, div를 하나 더 만들어서 검은색으로 표현했다.
그리고, 각 skill-bar들의 width 값을 CSS로 적용해주었다.)
지금은 HTML과 CSS를 이용해서 언뜻보면 괜찮아 보일지 몰라도, jQuery가 들어가있지 않아 동적인 구현이 어렵다.
위의 html, css 소스코드를 토대로 jQuery를 이용하여 동적인 구현을 해보자.
먼저, jQuery CDN을 html문서 안에 넣어보자.
(난 head가 끝나는 부분에 넣어주었다.)
1 2 | <script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script> | cs |
<실행 화면>
gif로 만들었는데 끊겨서 보이네요 ㅠㅠ 실행화면 클릭 시 잘 보입니다.
위와 같이 실행되는 것을 볼 수 있다.
그런데 %의 값이 이상하다.
이유인즉슨, width의 값을 jQuery 변수인 barWidth로 불러올 때 픽셀 단위로 표현되어있기 때문이다.
(막대기의 총 width 값은 980px이다. )
이제 픽셀값을 %의 값으로 변환시켜주면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script> $(function(){ var barWidth1 = $('.skill-bar1').innerWidth()/980*100; var barWidth2 = $('.skill-bar2').innerWidth()/980*100; var barWidth3 = $('.skill-bar3').innerWidth()/980*100; var barWidth4 = $('.skill-bar4').innerWidth()/980*100; $('.skill-bar1').animate({width:"0%"},0).delay(0).animate({width:"90%"},2000); // animate구동 시 먼저 0% 초기화 해주고, width가 90%만큼 동적 구현 해주기 $('.skill-bar1').text(barWidth1 + "%"); //'.skill-bar1'의 width 값을 text로 표시하고, 단위는 %로 나타내기 $('.skill-bar2').animate({width:"0%"},0).delay(300).animate({width:"70%"},2000); $('.skill-bar2').text(barWidth2 + "%"); $('.skill-bar3').animate({width:"0%"},0).delay(500).animate({width:"50%"},2000); $('.skill-bar3').text(barWidth3 + "%"); $('.skill-bar4').animate({width:"0%"},0).delay(800).animate({width:"80%"},2000); $('.skill-bar4').text(barWidth4 + "%"); }); </script> | cs |
위와 같이,
변환되는 너비값 / 총 너비 값 * 100(백분율로 표현해주기위해) 을 해주면
(gif로 만들었는데 끊겨서 보이네요 ㅠㅠ 실행화면 클릭 시 잘 보입니다.)
%로 값이 변하는 것을 볼 수가 있다.
html안의 skill-bar 내부의 %값들을 삭제해도 위와 같은 화면이 뜬다.
끄읏 -
'JS, CSS, jQuery, HTML, AJAX > jQuery' 카테고리의 다른 글
| jQuery animate()를 이용한 헤더 navigation 만들기 (0) | 2018.01.26 |
|---|---|
| mouseenter / mouseleave 이벤트 (0) | 2018.01.24 |