hoverMobile

hovermobile.js：モバイルデバイスのホバー効果をシミュレートするJavaScriptライブラリ

このJavaScriptライブラリは、LCDに指を動かすことによってのみポインターを使用して、モバイルデバイスのホバー効果をシミュレートします。

例1	例2

http://www.gabrielconceicao.com/hovermobileのモバイルデバイスの例を参照するか、私のウェブサイトで作業しているこのライブラリを確認してください：http://www.gabrielconceo.com/

どのように機能しますか？

ユーザーがLCDを非常に迅速に3回押すと、ポインターが表示され、ホバー効果で指を要素に移動し、デスクトップのようにその効果を確認できます。要素に「HOVER ON HOVER」コードのJavaScriptがある場合、リスナーでも実行されます。彼がLCDを押すのを止めると、ポインターは消滅します。

働くために必要な3つのことは次のとおりです。

• このライブラリをウェブサイトに追加します。
• A：Hover Pseudoクラスを使用して、すべての要素のHoverクラスを定義し、同じロジックをコピーします。
• ホバーリスナーで、TouchenterとTouchLeaveイベントを定義します。

図書館は、彼が要素をホバリングしているときにイベントのタッチェンターを発射し、要素を離れるときにタッチリーブを発射します。

THE：HOVER CSS擬似クラス効果：このライブラリでモバイルでどのように機能しますか？

StyleSheetファイルに.hoverクラスを作成して、以下をシミュレートします。あなたがしなければならないのは、この擬似クラスのコンテンツを.hoverクラスに繰り返すことです。例：

 button:hover{
	background-color: red;
}

あなたがしなければならないのは、このような新しいクラスを作成することだけです：

 button.hover{
	background-color: red;
}

JavaScript：このライブラリでは、モバイルデバイスでのマウスオーバーイベントワークに何が必要ですか？

ElementsでTouchenterとTouchLeaveイベントを簡単に定義すると、ライブラリがイベントを発射します。

例：

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

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

オプションとintialization

このライブラリを起動して、このパラメーターで開始関数を呼び出すことができます。

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

パラメーター「Animateel」は、DOMの要素が効果を表示するかを定義します。

実装の例を参照してください：https：//github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

このライブラリはgo.libraryに依存します。これの詳細については、https：//github.com/gabrielpconceico/go-libraryを参照してください

#in開発プロセス