js 이벤트 대상 마우스 휠 효과 설명

6455 단어 js이벤트 개체마우스 휠
Mouse Wheel Data

텍스트 상자 증가/감소 값

텍스트 상자 초점 획득 후 마우스 스크롤 휠

마우스 스크롤 크기 조정 그림

마우스 스크롤 크기슬라이더 이동 제어

var$=function(i){return document.getElement ById(i);}///스크롤 값 function getWheelValue(e){e=e||이벤트 가 져 오기;return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail/3 : e.detail ) ) ; } function stopEvent(e) { e = e||event; if( e.preventDefault )e.preventDefault(); e.returnValue = false; } //귀속 이벤트,여기 서 mousewheel 에 대한 판단 을 했 습 니 다.등록 시 mousewheel function addEvent(obj,type,fn){var isFirefox=typeof document.body.style.MozUserSelect!='undefined'; if( obj.addEventListener ) obj.addEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.attachEvent( 'on'+type,fn ); return fn; } //이벤트 제거,mousewheel 호 환,제거 시 mousewheel function delEvent(obj,type,fn){var isFirefox=type of document.body.style.MozUserSelect!='undefined'; if( obj.removeEventListener ) obj.removeEventListener( isFirefox ? 'DOMMouseScroll' : type,fn,false ); else obj.detachEvent( 'on'+type,fn ); } /*제한 범위 함수,매개 변 수 는 세 개의 숫자 입 니 다.num 이 max 보다 크 면 max 로 돌아 갑 니 다.min 보다 작 으 면 min 으로 돌아 갑 니 다.max 와 min 사이 에 있 으 면 num*/function range(num,max,min){return Math.min(max,Math.max(num,min)을 되 돌려 줍 니 다.h2>텍스트 상자 증가/감소 값*/$('txt').onfocus=function(){//txt 자신의 인용 var me=this,/onfocus 를 저장 한 후 롤러 이벤트 handler=addEvent(me,'mousewheel',function(e){stopEvent(e)를 등록 합 니 다.var delta = getWheelValue(e); /* +me.value 는 me.value 를 숫자 로 변환 한 다음 isNaN 을 사용 하여 변 환 된 숫자 가 NaN 인지 확인 합 니 다.그렇다면 me.value=0 을 다시 할당 합 니 다.*/if( isNaN( +me.value ) ) me.value = 0; //증가(또는 감소)me.value=+me.value+delta;/me 에 있 는 텍스트 me.select();}를 선택 하 십시오./초점 을 잃 었 을 때 mousewheel 이 벤트 를 제거 하고 window.onblur 와 handler 를 null this.onblur=function(){/mousewheel 이벤트 delEvent(me,'mousewheel',handler)로 초기 화 합 니 다.window.onblur = handler = null; } //브 라 우 저가 초점 을 잃 은 후 텍스트 상자 가 focus 를 반복 적 으로 터치 하 는 것 을 방지 하기 위해 onblur 에서 텍스트 상자 가 동시에 초점 을 잃 게 합 니 다 window.onblur=function(){me.blur();/자신 을 제거 this.onblur=null;}/*

마우스 스크롤 크기 조정 그림

*/addEvent($('img'),'mousewheel',function(e){stopEvent(e);var delta = getWheelValue(e); //매번 증가(또는 감소)10px,범위 제한 을 사용 하여 그림 이 작은 var img=$(img)보다 크 지 않도록 합 니 다.//i 의 this 지향 을 복구 하지 않 았 기 때문에 img img.style.width=range(img.offsetWidth+(delta*10),550,100)+'px'를 다시 가 져 올 수 밖 에 없습니다.return false; }); /*

마우스 스크롤 제어 슬라이더 이동

*/addEvent($('slider'),'mousewheel',function(e){stopEvent(e);var delta = getWheelValue(e), tar = $('sliderTrigger'); //컵 기구의 반전 은 tar.offsetTop 이 클 수록 슬라이더 가 아래로 내 려 가기 때문에 delta 는 다시 반전 이 필요 합 니 다.위로 마이너스 이 고 아래로 플러스 이기 때문에 곱 하기-1 tar.style.top=range(tar.offsetTop+(-1*delta*10),160,0)+'px';});script>[Ctrl+A 전체 선택:引入外部Js需再刷新一下页面才能执行]각 브 라 우 저의 호 환 상황 IE 6,7,8 등록 이벤트 에서 onmousewheel 을 사용 하여 굴 러 가 는 값 을 이벤트 로 사용 합 니 다.wheelDelta 굴 러 가 는 길 이 는 120 이하 로 마이너스 이 며,위로 올 라 가 는 것 은 마우스 가 같은 좌표 에 있 고,굴 러 가 는 바퀴 가 끊임없이 굴 러 갈 때,wheelDelta 는 보폭 에 따라 증가 합 니 다(예 를 들 어-240-360)Firefox 3.5 등록 사건 은 두 개의 MozMouse Pixel Scroll,DOMMouse Scroll 이 있 지만 element.onDOMMouse Scroll 방식 으로 등록 할 수 없습니다.addEvent Linstener 를 사용 하여 사건 을 감청 해 야 합 니 다 Firefox 에는 이벤트 가 없습니다.wheelDelta,이벤트.detail 을 사용 하여 굴 러 가 는 정 보 를 얻 습 니 다.아래 는 정(이 문 제 는 코드 에서 통일 되 어야 합 니 다)왜 그 값 이 보통 3 과-3 이 라 고 말 합 니까?ctrl,alt,shift 를 누 른 후에 마우스 롤러 를 미 끄 러 뜨리 면 detail 의 값 은 1 과-1 이 되 고 다른 키 를 누 르 면 바로 6 이 되 기 때 문 입 니 다.어쨌든 제 가 보기 에는 좀 엉망 입 니 다.MozMouse Pixel Scroll 은 Mozilla 에 따 르 면...거의 DOMMouse Scroll 과 같은 이벤트 입 니 다.더 정확 할 뿐 입 니 다.(픽 셀 까지)하지만 이 이벤트 의 detail 값 은 매우 이상 하 게 돌아 갑 니 다.기본 값 은 51 과-51 입 니 다.ctrl,alt,shift 를 누 르 면+-17 이 됩 니 다.@@,그래서 화려 하 게 무시 당 했 습 니 다.크롬 과 IE 를 사용 하지 않 으 려 고 했 습 니 다.그러나 가로 마우스 휠 장치 의 상황 을 고려 하여 두 개의 마 우 스 를 추가 하여 각각 값 이벤트 onmousewheel Delta{number}wheelDelta X{number}wheelDelta Y{number}를 얻 었 습 니 다.이번 Opera 는 집대성 자 입 니 다.detail 수치 도 3,-3 입 니 다.또 wheelDelta 가 있 습 니 다.하지만 표현 상 일치 하 는 이벤트 onmousewheel detail={number}wheelDelta={number}은 Firefox 가 지원 하 는 event.detail 이나 IE 등 이 지원 하 는 event.wheelDelta 의 수치 중 하 나 를 선택 하고 다른 하 나 를 계산 을 통 해 통일 시 켜 야 합 니 다.그러나 실제로 우 리 는 이 값 을 통 해 위로 굴 러 가 는 지 아래로 굴 러 가 는 지 알 수 밖 에 없습니다.그래서 편 의 를 위해 우리 둘 다 취하 지 않 고 계산 을 통 해 그들 을+1 과-1 로 통일 시 켰 다.(이렇게 하 는 것 도 실제 응용 에서 의 연산 편 의 를 위해 서 이다)IE,Chrome 의 경우 120 을 직접 나 누 면 Opera 가 wheelDelta 와 detail 을 동시에 지원 할 수 있 습 니 다.그러나 detail 은 wheelDelta 와 같은 위치 에서 점점 증가 하 는 능력 이 없 기 때문에 우 리 는 우선 wheelDelta 가 존재 하 는 지 판단 하고 존재 한다 면 wheelDelta 를 사용 합 니 다.존재 하지 않 으 면 detail 을 사용 합 니 다.fireforx 의 키보드 간섭 으로 인해...우 리 는 detail 에 대해 필 터 를 해 야 합 니 다.먼저 이 값 과 3 으로 모드 연산 value%3 을 3 의 배수 라 고 말 합 니 다.그러면 반환 값 은 0 입 니 다.우 리 는 value 로 3 을 나 눈 후에 돌아 갑 니 다.(반환 값 이+1-1 임 을 보증 합 니 다)반환 값 이 0 이 아니라면 이 값 이 1 이 아니면-1 임 을 설명 합 니 다.그러면 이 값 을 마지막 으로 되 돌려 줍 니 다.Firefox 반환 값 의 규칙 은 위로 마이너스 아래로 플러스 이기 때문에 평소 습관 과 달리 우 리 는 플러스 마이너스 반전 을 해 야 합 니 다.방법 도 간단 합 니 다.계산 결과 앞 에 마이너스 번 호 를 추가 하면 해결 할 수 있 습 니 다.그 러 고 보 니 롤러 사건 에 대한 지원 상황 은 Firefox 가 정말 답답 합 니 다.자,분석 을 많이 했 습 니 다.사실 코드 는 몇 마디 입 니 다
 
function getWheelValue( e ) 
{ 
e = e||event; 
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) ); 
}
마지막 으로 미래의 롤러 이벤트 와 API 가 DOM 3 이벤트 에서 롤러 이벤트 가 더욱 복잡 해 지고(더 많은 것 을 지원 합 니 다)등 록 된 사건 은 변 하지 않 았 습 니 다.mousewheel 은 두 개의 롤러 이벤트 대상 인 Mouse WheelEvent WheelEvents 를 추 가 했 고 x,y,z 세 축의 롤러 값(정말 복잡 합 니 다> <)을 지 원 했 습 니 다.관심 있 으 면 여기 보 세 요.
niceTitle jquery 기반 하이퍼링크 알림 플러그 인
jquery 기반 inputlimiter 글자 수 제한 기능 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage