hoverMobile

HoverMobile.js: Perpustakaan JavaScript untuk mensimulasikan efek hover pada perangkat seluler

Perpustakaan JavaScript ini mensimulasikan efek hover pada perangkat seluler, dengan pointer hanya dengan menggerakkan jari Anda pada LCD.

Contoh 1	Contoh 2

Lihat contoh di perangkat seluler Anda di http://www.gabrielconceicao.com/hovermobile atau verifikasi perpustakaan ini bekerja di situs web saya: http://www.gabrielconceicao.com/

Bagaimana cara kerjanya?

Ketika pengguna menekan LCD tiga kali dengan sangat cepat, pointer akan muncul dan dia dapat memindahkan jarinya ke elemen dengan beberapa efek hover dan melihat efek itu, seperti di desktop. Jika elemen memiliki beberapa kode JavaScript "pada Hover", itu akan berjalan juga, dengan pendengar. Ketika dia berhenti menekan LCD, pointer menghilang.

Hanya tiga hal yang diperlukan untuk bekerja adalah:

• Tambahkan perpustakaan ini ke situs web Anda;
• Tentukan kelas .Hover pada setiap elemen dengan: Hover Pseudo Class dan salin logika yang sama.
• Pada pendengar Anda, tentukan acara penyentuh dan sentuh.

Perpustakaan akan memecat penyentuh acara ketika dia melayang dan menyentuh api ketika meninggalkan elemen.

The: Hover CSS Pseudo Class Effect: Bagaimana cara kerjanya di ponsel dengan perpustakaan ini?

Buat kelas .Hover di file stylesheet Anda, untuk mensimulasikan: Efek Hover. Yang harus Anda lakukan adalah mengulangi konten kelas semu ini ke kelas. Contoh:

 button:hover{
	background-color: red;
}

Yang harus Anda lakukan adalah membuat kelas baru seperti ini:

 button.hover{
	background-color: red;
}

JavaScript: Dengan perpustakaan ini apa yang diperlukan untuk acara mouseover yang berfungsi pada perangkat seluler?

Sederhana menentukan peristiwa penyentuh dan sentuhan di elemen dan perpustakaan akan menembakkan peristiwa.

Contoh:

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

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

Opsi dan Intalization

Anda dapat memulai perpustakaan ini, memanggil fungsi start dengan parameter ini:

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

Parameter "Animateels" mendefinisikan elemen apa dari DOM akan menunjukkan efeknya.

Lihat contoh implementasi: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Perpustakaan ini tergantung pada go.library. Untuk informasi lebih lanjut tentang ini, lihat https://github.com/gabrielpconceicao/go-library

Proses Pengembangan #Dalam