hoverMobile

Hovermobile.js: JavaScript -Bibliothek, um den Schwebeffekt auf ein mobiles Gerät zu simulieren

Diese JavaScript -Bibliothek simuliert den Schwebeffekt auf mobile Geräte mit einem Zeiger nur, indem Sie Ihren Finger auf das LCD verschieben.

Beispiel 1	Beispiel 2

Siehe das Beispiel auf Ihrem Mobilgerät unter http://www.gabrielconceicao.com/hovermobile oder überprüfen

Wie funktioniert es?

Wenn der Benutzer das LCD dreimal sehr schnell drückt, wird ein Zeiger angezeigt, und er kann seinen Finger mit einem schwebenden Effekt zum Element bewegen und diesen Effekt wie auf Desktop sehen. Wenn das Element einen JavaScript -Code "auf dem Hover" enthält, wird es auch mit einem Hörer ausgeführt. Wenn er aufhört, auf das LCD zu drücken, verspricht der Zeiger.

Die einzigen drei Dinge, die zur Arbeit erforderlich sind, sind:

• Fügen Sie diese Bibliothek Ihrer Website hinzu.
• Definieren Sie eine .hover -Klasse in jedem Element mit A: Hover Pseudo -Klasse und kopieren Sie dieselbe Logik.
• Definieren Sie bei Ihren Hover -Zuhörern die Ereignisse für Touchenter und Touchleave.

Die Bibliothek feuert den Ereignis -Touchenter ab, wenn er das Element schwebt und das Element verlässt.

Der: Hover CSS Pseudo -Klasseneffekt: Wie funktioniert es in Mobilgeräten mit dieser Bibliothek?

Erstellen Sie die .hover -Klasse in Ihrer Stylesheet -Datei, um den: Hover -Effekt zu simulieren. Alles, was Sie tun müssen, ist, den Inhalt dieser Pseudo -Klasse in die .hover -Klasse zu wiederholen. Beispiel:

 button:hover{
	background-color: red;
}

Alles, was Sie tun müssen, ist eine neue Klasse wie folgt zu erstellen:

 button.hover{
	background-color: red;
}

JavaScript: Mit dieser Bibliothek, was für die Mausover -Veranstaltung auf Mobilgeräten erforderlich ist?

Einfaches Definieren Sie die Ereignisse in Elementen und die Berührung von TouchSeave in Elementen und die Bibliothek wird die Ereignisse abfeuern.

Beispiel:

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

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

Optionen und Intialisierung

Sie können diese Bibliothek starten und die Startfunktion mit diesen Parametern aufrufen:

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

Der Parameter "Animateels" definiert, welche Elemente des DOM den Effekt zeigen werden.

Siehe ein Beispiel für die Implementierung: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Diese Bibliothek hängt von Go.Library ab. Weitere Informationen finden Sie unter https://github.com/gabrielpconceicao/go-library

#In Entwicklungsprozess