'jQuery'에 해당되는 글 4건

  1. 2010.10.09 Side Tab
  2. 2010.09.12 jQuery Plug-in
  3. 2010.08.30 jQuery 1.4변경사항
  4. 2010.08.27 유용한 놈들(jQuery)

Side Tab

JavaScript 2010. 10. 9. 18:10 |
종종 나오는 케이스라서 기록해 놓는다. C&P방법론 적용하여 구현하자.
모양은 아래와 같다.
우측 탭 마우스 오버시 왼쪽 이미지가 변한다.



한 방에 긁어 성공하려면 이미지 이름이 다음과 같이 되어야 한다.
왼쪽 큰 이미지 >> 이미지 이름 끝에 1~n까지의 순번 부여 
<img id="changeImage" src="/images/fortune/gunghap_box1.gif" />
(gunghap_box2, gunghap_box3, gunghap_box4 ...)

오른 쪽 탭 이미지 >> over이미지일 경우이미지 명이  ov.gif, 아닐경우 or.gif로 끝나게
<img src="/images/fortune/gunghap_index_tab01ov.gif" class="imgOv" />
<img src="/images/fortune/gunghap_index_tab02or.gif" class="imgOv"  />
<img src="/images/fortune/gunghap_index_tab03or.gif" class="imgOv"  />
<img src="/images/fortune/gunghap_index_tab04or.gif" class="imgOv"  />


구현 소스는 다음과 같다.
----------------------------------------------------------------------------------
$("img.imgOv")
.addClass("pointer")
.bind('mouseover', function(){
$("img.imgOv").map(function(){
$(this).attr('src',$(this).attr('src').replace('ov.gif','or.gif'));
});
$(this).attr('src',$(this).attr('src').replace('or.gif','ov.gif'));


var idx = $("img.imgOv").index(this); $("#changeImage").attr('src', '/images/fortune/gunghap_box'+(idx+1)+'.gif'); $("#changeImage").show();
});

저작자표시

'JavaScript' 카테고리의 다른 글

jquery live  (0) 2011.05.20
세션유지  (0) 2010.12.20
팝업 띄우기 주소보안 방법.  (0) 2010.10.07
유용한 놈들  (0) 2010.09.26
jQuery Plug-in  (0) 2010.09.12
Posted by 기계식키보드
:

jQuery Plug-in

JavaScript 2010. 9. 12. 15:01 |
from
http://affo.springnote.com/pages/5597897





저작자표시

'JavaScript' 카테고리의 다른 글

팝업 띄우기 주소보안 방법.  (0) 2010.10.07
유용한 놈들  (0) 2010.09.26
jQuery UI Tab Header 없애기  (1) 2010.08.31
jQuery 1.4변경사항  (0) 2010.08.30
유용한 놈들(jQuery)  (0) 2010.08.27
Posted by 기계식키보드
:

jQuery 1.4변경사항

JavaScript 2010. 8. 30. 15:55 |
http://firejune.com/1527

저작자표시

'JavaScript' 카테고리의 다른 글

jQuery Plug-in  (0) 2010.09.12
jQuery UI Tab Header 없애기  (1) 2010.08.31
유용한 놈들(jQuery)  (0) 2010.08.27
구현한 놈들  (0) 2010.08.06
정규식  (0) 2010.07.26
Posted by 기계식키보드
:

유용한 놈들(jQuery)

JavaScript 2010. 8. 27. 11:05 |
[ 숫자만 입력 받기 ]
$("#phone").bind('keyup', function(e){
$(this).val( $(this).val().replace(/[^0-9]/g, ""));
});

// 퍼센테이지 애니메이션
$("img.percentage").map(function(){
$(this).animate({"height":percentage[$("img.percentage").index(this)]},2000);
});


저작자표시

'JavaScript' 카테고리의 다른 글

jQuery UI Tab Header 없애기  (1) 2010.08.31
jQuery 1.4변경사항  (0) 2010.08.30
구현한 놈들  (0) 2010.08.06
정규식  (0) 2010.07.26
Ajax 뒤로가기 구현  (3) 2010.07.26
Posted by 기계식키보드
:

티스토리툴바