hoverMobile

Hovermobile.js: Biblioteca JavaScript para simular o efeito pairar em um dispositivo móvel

Esta biblioteca JavaScript simula o efeito pairar nos dispositivos móveis, com um ponteiro apenas movendo o dedo no LCD.

Exemplo 1	Exemplo 2

Veja o exemplo no seu dispositivo móvel em http://www.gabrielconceicao.com/hovermobile ou verifique esta biblioteca trabalhando no meu site: http://www.gabrielconceica.com/

Como funciona?

Quando o usuário pressiona o LCD três vezes muito rapidamente, um ponteiro aparecerá e ele pode mover o dedo para o elemento com algum efeito de pairar e ver esse efeito, como na área de trabalho. Se o elemento tiver algum código JavaScript "On Hover", ele também será executado, com um ouvinte. Quando ele para de pressionar o LCD, o ponteiro desaparece.

As únicas três coisas necessárias para o trabalho são:

• Adicione esta biblioteca ao seu site;
• Defina uma classe .Os em todos os elementos com a: Pseudo -classe Pseudo e copie a mesma lógica.
• Nos seus ouvintes em pairar, defina os eventos Touchenter e Touchlevera.

A biblioteca demitirá o evento Touchenter quando ele estiver pairando o elemento e dispara touchleve quando sair do elemento.

O: Hover CSS Pseudo -Class Efeito: Como funciona em celular com esta biblioteca?

Crie a classe .Hover em seu arquivo de folha de estilo, para simular o: Efeito Passe o Mirar. Tudo o que você precisa fazer é repetir o conteúdo desta pseudo -classe para a classe .Hover. Exemplo:

 button:hover{
	background-color: red;
}

Tudo o que você precisa fazer é criar uma nova classe como esta:

 button.hover{
	background-color: red;
}

JavaScript: com esta biblioteca O que é necessário para o trabalho de evento MouseOver em dispositivos móveis?

Simples Defina os eventos Touchenter e Touchleave nos elementos e a biblioteca demitirá os eventos.

Exemplo:

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

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

Opções e intialização

Você pode iniciar esta biblioteca, chamando a função de início com este parâmetros:

	<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>

O parâmetro "Animateels" define quais elementos do DOM mostrarão o efeito.

Veja um exemplo da implementação: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Esta biblioteca depende do go.library. Para mais informações sobre isso, consulte https://github.com/gabrielpconceicao/go-library

#No processo de desenvolvimento