Jquery[제이쿼리] CSS+CLICK+ANIMATE로 글자/이미지 크기수정하기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] CSS+CLICK+ANIMATE로 글자/이미지 크기수정을 해보겠습니다.

그럼 하기전에 셋팅을해볼까요~ 이번에는 버튼을 만들어 봤습니당.

이렇게 나온답니다.
자 출발해볼까요~

===============================
$('.but1').click(function(){
   var font_size = $('label').css('font-size');
   $('label').css('font-size',parseInt(font_size)+2);   
  });  
===============================
class이름이 but1인 '글자야 커저랏!' <== 버튼을 클릭하면
<label> 태그의 'font-size'글자의 크기를 가지고와서 
font_size라는 변수에다가 집어넣습니다.!
그다음  <label>태그의  'font-size' 크기를 font_size변수의 값에서 +2를 한다는 뜻입니다.
<label>태그의 글자의 크기가 10이면 10+2 즉 버트누를때마다 글자크기가 2씩 증가한다는뜻입니다.
※parseInt는 문자를 숫자로 바꿔주는거 다아시죠?

'글자야 작아저랏!'버튼은 위에 소스에서 
===============================
$('.but2').click(function(){
$('label').css('font-size',parseInt(font_size)-2);   
===============================
이것만 바꾸면 되겠죠? 설명은 생략합니다.

실행을하면 그대로이지만.....

'글자야 커저랏!' 버튼을 누르면 글자가 커진답니다.

'글자야 작아저랏!' 버튼을 누르면 작아지는게 보이실거에요 ㅎㅎ

그럼 이번에는 이미지를 해볼께요
===============================
$('.but3').click(function(){
   var width=$('img').css('width');
   var height=$('img').css('height');
   $('img').animate({
    width:parseInt(width)*2,
    height:parseInt(height)*2
   },'slow');
  }); 
===============================
class이름이 but3인 '그림아 커저랏!' <== 버튼을 클릭하면
<img>태그의 width,height 값을 각자의 변수에 저장합니다.
그리고난뒤 <img>태그의 가로/세로의 값을 위에서가지고온 값에 *2를 해준다는뜻입니다.
※animate란 새로운 임의의 애니메이션을 생성하는 메서드입니다. 
이것도 나중에 따로배우도록 해볼께요 ㅎㅎ
'slow' 이부분은 많이보셔서 아실거라고 생각해요~
'그림아 작아저랏!' 버튼은 대상을 'but3'로 width,height을 /2 해주면되겠죠?
그럼실행을 해볼께요 ㅎㅎ

아직 버튼을 클릭하기전입니다.

'그림아 커저랏!' 버튼을 한3번정도 눌럿던거같네요!

'그림아 작아저랏!' 버튼을 눌럿을때 입니다.
오늘은 제이쿼리[jquery] CSS+CLICK+ANIMATE로 글자/이미지 크기수정을 해보았습니다.
그럼 다음에 또만나요~