(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 값이 양수, 아래로 굴리면 음수가 된다.