[JS] 프로그래스 조절

•  
• [HTML]
• [CSS]
• [JS]
• 결과
•  
• 마치며

 

[HTML]

<!-- jquery 1.12.4 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- 전체 영역 -->
<div class="progress">
	<!-- 프로그래스 바 -->
	<div class="state"></div>
</div>

[CSS]

 .progress{
    width : 100%;
    height :50px;
    //부모 위치에 설정
    position: relative;
    top:0;
    left:0;
    overflow-x: hidden;
    cursor: pointer;
}

.state{
    width : 0;
    height :50px;
    //부모랑 같은 위치에 두기위한 포지션
    position: absolute;
    top:0;
    left:0;
    //색상
    background-color : rgb(24, 117, 255);
}

[JS]

$(document).ready(function(){
	//프로그래스 바를 클릭
	$('.progress').click(function(e){
    	// 변수 x는 .progress의 left값에서 클릭한 위치의 X값을 뺀다.
        // e.pageX는 화면에서 클릭한 X의 위치를 가져온다. 
        var x = e.pageX - $('.progress').offset().left;
        //변수 clickPercentage는 변수 x / .progress.너비
        clickPercentage = x / $('.progress').width();
        //.state의 너비는 (.progress의 너비에서 변수 clickPercentage를 곱한 값);
        $('.state').width($('.progress').width() * clickPercentage);
    })
})

 

 

결과

 

 

마치며

 

코드는 많고 사용법도 다양합니다. 다양한 방법으로 코드를 꾸며보세요.