hoverMobile

hovermobile.js: bibliothèque javascript pour simuler l'effet de survol sur un appareil mobile

Cette bibliothèque JavaScript simule l'effet de survol sur les appareils mobiles, avec un pointeur uniquement en déplaçant votre doigt sur l'écran LCD.

Exemple 1	Exemple 2

Voir l'exemple sur votre appareil mobile à http://www.gabrielconceicao.com/hovermobile ou vérifiez cette bibliothèque travaillant sur mon site Web: http://www.gabrielconceico.com/

Comment ça marche?

Lorsque l'utilisateur appuie sur l'écran LCD trois fois très rapidement, un pointeur apparaît et il peut déplacer son doigt vers l'élément avec un effet de survol et voir cet effet, comme sur bureau. Si l'élément a du code JavaScript "sur Hover", il s'exécutera également, avec un écouteur. Lorsqu'il cesse d'appuyer sur l'écran LCD, le pointeur se dissape.

Les trois seules choses nécessaires pour travailler sont:

• Ajoutez cette bibliothèque à votre site Web;
• Définissez une classe .hover sur chaque élément avec A: Voolisez la classe pseudo et copiez la même logique.
• Sur vos auditeurs en volants, définissez les événements Touchenter et TouchLeave.

La bibliothèque licenciera l'événement Touchenter lorsqu'il oscille l'élément et que le feu de feu de feu lorsqu'il quitte l'élément.

Le: Hover CSS Pseudo Class Effet: Comment cela fonctionne dans mobile avec cette bibliothèque?

Créez la classe .hover dans votre fichier de feuille de style pour simuler l'effet: en survol. Tout ce que vous avez à faire est de répéter le contenu de cette classe pseudo à la classe .hover. Exemple:

 button:hover{
	background-color: red;
}

Tout ce que vous avez à faire est de créer une nouvelle classe comme ceci:

 button.hover{
	background-color: red;
}

JavaScript: Avec cette bibliothèque, que nécessaire pour l'événement Mouseover travail sur les appareils mobiles?

Définissez simple les événements Touchenter et TouchLeave aux éléments et la bibliothèque déclenchera les événements.

Exemple:

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

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

Options et intialisation

Vous pouvez démarrer cette bibliothèque, en appelant la fonction de démarrage avec ces paramètres:

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

Le paramètre "Animateels" définit quels éléments du Dom montrera l'effet.

Voir un exemple de l'implémentation: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Cette bibliothèque dépend de go.library. Pour plus d'informations à ce sujet, voir https://github.com/gabrielpconceicao/go-bibrary

# Dans le processus de développement