Geekly Articles each Day

マウスジェスチャーのプログラミング


多くのOperaおよびFireFoxユーザーは、いわゆるMouse Gestures（FFには同じ名前のプラグインがあります）の存在に気づいています-ブラウザがさまざまなアクション（新しいウィンドウを開く、ブックマーク、戻る、進むなど）によって応答するマウスジェスチャp。）、この機能の唯一の欠点は、サイトとの対話がないことであり、開発者がサイトに同様の機能を追加するのに役立つ小さなライブラリを作成することにしました...

現時点では、ライブラリは8つの単純なジェスチャーのみを理解しています。
そしてその派生物

ライブラリを接続するには、次のコードをページに追加する必要があります。
<script src = "javascript / navigation.js" type = "text / javascript"> </ script>

次に、次のコードをコピーします。
<スクリプト言語= "JavaScript">
//関数をイベントにバインドするためにjQueryを使用します
$（ドキュメント）.mousedown（navigation.mousedown）;
$（ドキュメント）.mouseup（navigation.mouseup）;

//パラメータを設定します
navigation.minX = 50;
navigation.minY = 50;
navigation.maxX = 300;
navigation.maxY = 300;
//コールバック関数
navigation.TopLeft = function（X、Y）{};
navigation.Top = function（X、Y）{};
navigation.TopRight = function（X、Y）{};
navigation.Left = function（X、Y）{};
navigation.Right = function（X、Y）{};
navigation.BottomLeft = function（X、Y）{};
navigation.Bottom = function（X、Y）{};
navigation.BottomRight = function（X、Y）{};
</ script>

これは「ジェスチャー」の空白です。最初の2行は、2つの関数をグローバルイベントmousedownおよびmouseup（jQueryライブラリを使用）に掛けるために必要です。 次の4行は、ジェスチャーのパラメーターを示しています。 それらがトリガーされる制限。 次は、8つのコールバック関数の宣言です。パラメーターは、X軸とY軸に沿って絶対オフセットを取得します。

関数の誤ったトリガーを除外するには、押したCtrlキーにバインドすることをお勧めします（Ctrlキーコードは17です。変更する場合は、 http ： //unixpapa.com/js/key.htmlのすべてのコードを参照してください）。
$（window）.keydown（function（event）{
switch（event.keyCode）{
ケース17：
$（ドキュメント）.mousedown（navigation.mousedown）;
$（ドキュメント）.mouseup（navigation.mouseup）;
休憩;
}
}）;
$（window）.keyup（function（event）{
switch（event.keyCode）{
ケース17：
$（ドキュメント）.unbind（ 'mousedown'）;
$（ドキュメント）.unbind（ 'mouseup'）;
休憩;
}
}）;


そして、ここに私の例からのコードがあります：
function mouseGestures（）{
$（window）.keydown（function（event）{
switch（event.keyCode）{
// ...
//異なるキーは異なることをします
//異なるブラウザは異なるコードを提供します
//詳細はこちらをご覧ください： unixpapa.com/js/key.html
// ...
ケース17：
$（ドキュメント）.mousedown（navigation.mousedown）;
$（ドキュメント）.mouseup（navigation.mouseup）;
休憩;
}
}）;
$（window）.keyup（function（event）{
switch（event.keyCode）{
ケース17：
$（ドキュメント）.unbind（ 'mousedown'）;
$（ドキュメント）.unbind（ 'mouseup'）;
休憩;
}
}）;

navigation.maxX = 300;
navigation.maxY = 300;
navigation.TopLeft = function（X、Y）{select（$（ 'div＃left div.top'）、Math.abs（XY））};
navigation.Top = function（X、Y）{select（$（ 'div＃center div.top'）、Y）};
navigation.TopRight = function（X、Y）{select（$（ 'div＃right div.top'）、Math.abs（XY））};
navigation.Left = function（X、Y）{select（$（ 'div＃left div.middle'）、X）};
navigation.Right = function（X、Y）{select（$（ 'div＃right div.middle'）、X）};
navigation.BottomLeft = function（X、Y）{select（$（ 'div＃left div.bottom'）、Math.abs（XY））};
navigation.Bottom = function（X、Y）{select（$（ 'div＃center div.bottom'）、Y）};
navigation.BottomRight = function（X、Y）{select（$（ 'div＃right div.bottom'）、Math.abs（XY））};
}
関数選択（el、k）{
var speed = 1500;
スイッチ（true）{
ケース（k <50）：
速度= 500;
休憩;
ケース（k <100）：
速度= 1000;
休憩;
ケース（k <150）：
速度= 1500;
休憩;
ケース（k <200）：
速度= 2000;
休憩;
ケース（k> = 200）：
速度= 2500;
休憩;
}
el.animate（{
不透明度：0.4、
backgroundColor： '＃ffff00'
}、速度、「線形」、
関数（）{
el.animate（{
不透明度：1
backgroundColor： '#fffff'
}、速度）
}）;
}

どういうわけか、すべてが混乱します。すべての仕組みを試してみましょう （「Ctrl」を押しながらイベントをアクティブにしてみてください-任意の領域をクリックしてマウスボタンを押し、カーソルを目的の方向に50〜300ピクセル移動します）...

select関数について少しコメントします。最初のパラメーターはアニメーション化するDOM要素を取り、2番目のパラメーターは係数で、アニメーション速度はそれに依存し、係数は関心のある軸に沿った動きの量（またはそれらの差）です。 ...

なぜすべてがサイトにあるのですか？ 私にとっては、フォーラムの前/次のページ、トップイベントに行くために左と右のイベントに電話をかけると十分に便利です-ページのメインまたはトップに戻ると、便利になるかもしれません...

Crosspost： JavaScript：マウスジェスチャーのプログラミング

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

More articles:


All Articles