HTML(J-query, javascrpit) 이미지 크기조절

 

 

1. 스타일 이용하기.

 

style에 아래의 코드를 넣어줍니다.

 

<style>
    img{
        width:30%;
    }
    img:hover{
        transition-property:width;
        transition-duration:1s;
        width:50%;
    }
</style>

" img{} "는 img라는 초기 스타일값이니 초기 크기는 30%로~.

 

" img:hover{} " 는 마우스 포인터가 이미지 위에 있을때의 스타일 값 50%네용.

 

"transition-property" 는 어떤부분에 효과를 줄꺼냐는 것이고~

 

"transition-duration" 는 효과시간입니다.

 

적용해보죠~

 

이미지는 구글이미지를~ㅋㅋ

 

처음 실행시키면 이렇습니다. 

 

폭이 브라우저의 30%

 

마우스를 그림위에 놓으면 50%로 커지네용~

 

 

 

2.  JavaScript& class이용하기

 

JavaScript는 아래의 코드와 같이 만듭니다.

 

<script type="text/javascript">
    $(document).ready(function() {
        $("#pic").click(function(){
            if($(this).hasClass("small")){
                $("#pic").addClass("large") ;
                $("#pic").removeClass("small") ;
               
            }
            else{
                $("#pic").addClass("small") ;
                $("#pic").removeClass("large") ;               
            }
        });
    });
</script>

"$("id").click " 는 일종의 클릭리스너 입니다.

 

"$(this).hasClass("class")" 는 이놈안에 class라는 이름의 클래스가 포함되어 있는지 체크하는 거죠.

 

만약 #pic 라는 놈이 small 클래스라는 놈을 가지고 있다면 , large 클래스를 추가하고 small 클래스를 제거해 줍니다.

 

없다면 반대로~

 

그럼 스타일코드를 살펴보죠~

 

<style>
    #pic{
        -webkit-transition-property:width;
        -webkit-transition-duration:1s;
    }
    .small{
        width: 30%;
    }
    .large{
        width:50%;
    }
   
</style>

small 클래스는 폭이 30%네용. 그리고 large클래스는 50%입니다.

 

이미지쪽 코드를 봅시다

<img class="small" id="pic"src="http://images.forbes.com/media/lists/companies/google_200x200.jpg"/>

보니까 small클래스를 가지고 시작하네용.

 

그럼 초기엔 30% 클릭시 50%로 커지겠네용

 

다시 클릭하면 30%로 작아지고~

 

실행해 봅시다~

 

 

 

이게 클릭전입니다. 30%

 

클릭후 50%로 커졌어용~

 

다시클릭하면 30%로 작아집니다^^