hoverMobile

HoverMobile.js: Biblioteca JavaScript para simular el efecto de desplazamiento en un dispositivo móvil

Esta biblioteca de JavaScript simula el efecto flotante en los dispositivos móviles, con un puntero solo moviendo el dedo en la pantalla LCD.

Ejemplo 1	Ejemplo 2

Vea el ejemplo en su dispositivo móvil en http://www.gabrielconceicao.com/hovermobile o verifique esta biblioteca trabajando en mi sitio web: http://www.gabrielconceica.com/

¿Cómo funciona?

Cuando el usuario presione la LCD tres veces muy rápidamente, aparecerá un puntero y puede mover su dedo al elemento con algún efecto de desplazamiento y ver ese efecto, como en el escritorio. Si el elemento tiene un código JavaScript "On Hover", también se ejecutará, con un oyente. Cuando deja de presionar la pantalla LCD, el puntero desaparece.

Las únicas tres cosas necesarias para trabajar son:

• Agregue esta biblioteca a su sitio web;
• Defina una clase .Hover en cada elemento con una clase de pseudo y copia la misma lógica.
• En sus oyentes flotantes, defina los eventos de touchenter y touchleave.

La biblioteca disparará el touchenter del evento cuando se desplace del elemento y el hilo táctil de fuego cuando deja el elemento.

The: Hover CSS Pseudo Class Effect: ¿Cómo funciona en dispositivos móviles con esta biblioteca?

Cree la clase .Hover en su archivo de hoja de estilo, para simular el efecto: Hover. Todo lo que tienes que hacer es repetir el contenido de esta clase de pseudo a la clase .Hover. Ejemplo:

 button:hover{
	background-color: red;
}

Todo lo que tienes que hacer es crear una nueva clase como esta:

 button.hover{
	background-color: red;
}

JavaScript: Con esta biblioteca, ¿qué es necesario para el trabajo del evento Mouseover en dispositivos móviles?

Simple Definir los eventos de touchenter y touchleave en los elementos y la biblioteca disparará los eventos.

Ejemplo:

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

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

Opciones e intialización

Puede iniciar esta biblioteca, llamando a la función de inicio con estos 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>

El parámetro "Animateels" define qué elementos del DOM mostrarán el efecto.

Vea un ejemplo de la implementación: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Esta biblioteca depende de go.library. Para obtener más información sobre esto, consulte https://github.com/gabrielpconceicao/go-library

#En proceso de desarrollo