hoverMobile

HoverMobile.js : 모바일 장치의 호버 효과를 시뮬레이션하는 JavaScript 라이브러리

이 JavaScript 라이브러리는 LCD에서 손가락을 움직여서만 포인터를 사용하여 모바일 장치의 호버 효과를 시뮬레이션합니다.

예 1	예 2

모바일 장치의 예제 http://www.gabrielconceicao.com/hovermobile 또는 내 웹 사이트에서 작동하는이 라이브러리 확인 : http://www.gabrielconceicao.com/

어떻게 작동합니까?

사용자가 LCD를 세 번 빠르게 누르면 포인터가 나타나고 데스크탑에서와 같이 호버 효과로 손가락을 요소로 옮길 수 있습니다. 요소에 "Hover On Hover"코드가있는 JavaScript가 있으면 리스너와 함께 실행됩니다. 그가 LCD를 누르지 않으면 포인터는 해소됩니다.

일하는 데 필요한 세 가지 유일한 것은 다음과 같습니다.

• 이 라이브러리를 웹 사이트에 추가하십시오.
• a : 호버 의사 클래스를 사용하여 모든 요소에서 .hover 클래스를 정의하고 동일한 논리를 복사하십시오.
• 호버 리스너에서는 터치 센터 및 터치 리브 이벤트를 정의하십시오.

라이브러리는 요소가 떠날 때 요소를 떠올리면 이벤트 터치 센터를 발사합니다.

The : Hover CSS Pseudo 클래스 효과 :이 라이브러리와 함께 모바일에서 어떻게 작동합니까?

스타일 시트 파일에서 .hover 클래스를 만들고 호버 효과를 시뮬레이션하십시오. 이 의사 클래스의 내용을 .hover 클래스로 반복하기 만하면됩니다. 예:

 button:hover{
	background-color: red;
}

당신이해야 할 일은 다음과 같은 새로운 클래스를 만드는 것입니다.

 button.hover{
	background-color: red;
}

JavaScript : 이 라이브러리를 사용하면 모바일 장치에서 마우스 오버 이벤트 작업에 필요한 것은 무엇입니까?

간단한 요소에서 터치 센터 및 터치 리브 이벤트를 정의하면 라이브러리가 이벤트를 시작합니다.

예:

 $('button').on('mouseover touchenter', function(e) {
	// make something cool on hover
});

$('button').on('mouseleave touchleave', function(e) {
	// make something cool on leave
});

옵션 및 정수화

이 라이브러리를 시작 하여이 매개 변수로 시작 함수를 호출 할 수 있습니다.

	<script type="text/javascript">
		gO.ready( function(){
			hoverMobile.start({
				pointerEl: '.pointer',	
				animateEls: 'a,button,.more',	
				hideAfterTouch: true,
				showPointer: true,
				pointerOffsetX: 20,
				pointerOffsetY: 70,		
				delayPointer: 200,			
				fireHoverEvent: true,
				applyHoverCssEffect: true,	
				hoverClassName: 'hover',
			});
		});
	</script>

"Animateels"매개 변수는 DOM의 요소가 효과를 나타낼 것인지 정의합니다.

구현의 예를 참조하십시오 : https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

이 라이브러리는 go.library에 따라 다릅니다. 이에 대한 자세한 내용은 https://github.com/gabrielpconceicao/go-library를 참조하십시오

#개발 프로세스