jquery.vibrate.jsライブラリを使用した振動制御


今日はjQuery Vibrate.jsライブラリについて書きたいと思います。 このライブラリを使用すると、モバイルデバイスでバイブレーションを構成できます。バイブレーションの長さが異なるさまざまなモードを選択できます。
モバイルデバイスの振動により、メッセージや電話についてユーザーに警告したり、ゲームでのフィードバックを表示したりできます。
ライブラリを接続するには、jQuery.vibrate.min.jsファイルをjQueryと組み合わせて使用​​する必要があります。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="build/jquery/jquery.vibrate.min.js"></script> 

以下の例は、id =” example”の要素をクリックしたときの振動を示しています。
 $("#example").vibrate(); //  50  . $("#example").vibrate("short"); //  20  . $("#example").vibrate("long"); //  100  . 

次の例では、エレメントをクリックすると、最大3000ミリ秒で振動します。
 $("#example").vibrate({ duration: 3000, trigger: "touchstart" }); 

50ミリ秒続くアイテムをクリックすると振動します。
 var item = $("#example"); item.vibrate("medium"); item.vibrate("default"); item.vibrate(50); $("#example-five .button").vibrate({ duration: 2000, trigger: "touchstart" }); 

「少し設定」して、スマートフォンの振動要素、たとえば帝国の行進を再生できます。
最初のパラメーターは振動の持続時間を設定し、2番目のパラメーターは一時停止を設定します。
 navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]); 

パラメータから取得した長いボタンを使用した振動。
 $(“button").each(function() { $(this).vibrate(parseInt($(this).text(), 10)); }); 

以下のコードを使用すると、デバイスの可動性を判断し、画面に触れたときに振動を開始できます。
 var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); //   . $(".button").on(isMobile ? 'touchstart' : 'mousedown', function(e) { //  . navigator.vibrate(Infinity); //  . }); $(".button").on(isMobile ? 'touchend' : 'mouseup', function(e) { navigator.vibrate(0); //  . }); 

もちろん、このライブラリの欠点について注意する必要があります。 iOS Safari、Opera Mini、IE、BlackBerryなどのブラウザーでは機能しません。
ここで 、ライブラリをダウンロードして、動作をテストできます。


Source: https://habr.com/ru/post/J304472/


All Articles