skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptで独自マウスジェスチャーを作れる「jQuery Fancy Gestures」

｜ ｜ ｜ ｜ ｜ ｜ ｜

マウスを一定の方向に動かすことにより、特定の動作をさせるマウスジェスチャー。
jQuery Fancy Gesturesでは、これをオリジナルで作ることができます。

使用方法
jQuery Fancy Gesturesからファイル一式をダウンロードします。
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fancygestures.js"></script>
<script>
$(document).ready(function() {
$('#id名').fancygestures(function (data) {
document.getElementById('id名2').innerHTML += data;
});
});
</script>

上記で指定したidを書けば完成です。
<div id="id名"></div>
<div id="id名2"></div>//ここに表示されます
オリジナルを作るにはjquery.fancygestures.jsの40行目からのものに追記する必要があります。
gestures["skuare.net!"] = "51";
このように書くと左上から右下にマウスを動かした時にskuare.net！と表示されます。
※数字はjQuery Fancy Gesturesにある画像の通りです。
JavaScriptで独自マウスジェスチャーを作れる「jQuery Fancy Gestures」サンプル

記事作成：2009年06月18日

前の記事：floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」
次の記事：twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」