(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소

반응형

프로그램 소개: http://simulz.com/462

마우스 스크롤 줌인, 줌아웃

버튼 위에서 마우스 휠을 돌리면 CCTV가 확대·축소 된다.

$("<button id='cctv_zoominout' title='마우스 휠을 돌리면 CCTV가 확대·축소 됩니다. 클릭하면 기본 크기로 보입니다.'>↕100%</button>").insertAfter('#reset').hide(); var numWidth = 320; var numHeight = 240; $('#cctv_zoominout').click(function() { numWidth = 320; numHeight = 240; cctv_resize(this); }).mousewheel(function(objEvent, intDelta){ if (intDelta > 0){ if(numWidth >= 1280) return false; numWidth += 160; numHeight += 120; } else if (intDelta < 0){ if(numWidth <= 160) return false; numWidth -= 160; numHeight -= 120; } cctv_resize(this); }); var cctv_resize = function(obj) { $(obj).text('↕'+parseInt((numWidth/320)*100) + '%'); $('#cctv_view .cctv').animate({width: numWidth + 'px',height: numHeight + 'px'}, 'normal'); }

$("생략").insertAfter('#reset').hide();
ID가 reset인 객체 뒤에 코드를 추가하고 .hide() 메서드로 숨긴다.

.mousewheel(function(objEvent, intDelta){})
마우스 휠 이벤트 플러그인이다.

사용하려면 JS 파일을 먼저 연결해야 한다.
여기서 내려 받을 수 있다.

휠을 위로 굴리면 intDelta 값이 양수, 아래로 굴리면 음수가 된다.

반응형

저작자표시비영리변경금지

'PC&웹 > 웹프로그래밍' 카테고리의 다른 글

(카운터) 블로그용 페이지 카운터 개발, 적용 실험 중...  (3)	2010.01.24
(jQuery) 의정부시 CCTV 소스 강좌 - DIV 재정렬  (0)	2010.01.22
(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소  (0)	2010.01.22
jQuery 1.4에서 바뀐 것들  (0)	2010.01.22
(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과  (2)	2010.01.21
(jQuery) 의정부시 CCTV 소스 강좌 - 초기화 버튼 토글  (0)	2010.01.21