JavaScriptとAJAXでページ上のマウスの動きを録画・再生するデモ
ページ上で動かしたマウスの軌跡を記録し、再生することが可能になるJavaScriptやAJAXなどの組み合わせデモが公開されています。実際に試してみればわかりますが、記録している際には、特に記録されていると気づくような要素は全くありません。 応用としては、広告バナーのクリックについてアイトラッキング（目の動きを追う）の代わりに、マウスの移動する軌跡を記録して「マウストラッキング」が可能になったり、あるいはAJAXをフルに駆使したサイトにおけるユーザービリティの記録による操作の改善、あるいは各種スパイ行動などにも使えます。 実際のデモは以下から。 Record mouse movement using Javascript and AJAX http://pure.rednoize.com/movelogger/ 上記ページで四角いキューブの辺の周囲をマウスでなんどかぐるぐると回転させてみた
Lightbox風にムービーを表示する「Videobox」
画像をクリックすると、背景が暗くなって画面中央に画像がうにょ～んと開く透過レイヤー風効果を加えるのが、かの有名な「Lightbox」ですが、「Videobox」はそのムービー版です。対応しているのはYouTube、Google Video、Metacafe、iFilmなど。自分で作成したFlashも利用できます。 詳細とデモは以下から。 Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm http://videobox-lb.sourceforge.net/ 上記ページにあるサムネイル画像をクリックすれば実際にどんな感じで表示されるかを確認できます。 YouTubeの場合 MetaCafeの場合 Google Videoの場合 iFilmの場合 オリジナルのFlashの場合 最新版はムービーの縦横幅を指
ドラクエの効果音をMMLで - miniturbo:Hatena
追記 耳コピ手順をかいてみたりしました いやー難しい。 まず聞き取れないもん。でも楽しかった。 ホワイトノイズだけだと効果音は厳しい＞＜ 戦闘SE t180 l32 @3 o7 v12 gg+g-gg+g- r4 @4 o0 v12 c16 v15 c8 r2 @3 o6 v12 d>b<d+d>b<d+ r4 t200 @3 o6 v12 a16g16e-16 r2 ; 教会 コメントにオクターブ低いって書いてあったから直してみました＞＜ t120l4 @E1,0,127,127,127 @3 o5 eg<ce8.&e32f2d2e1 ; t120l4 @E1,0,127,127,127 @3 o5 r2.&r8.&r32.a1g1 ; t120l4 @E1,0,127,127,127 @0 o4 eg<ce<c1c1 ; 宿屋 t120l8v15 @3 o7 dc+c>ba16r16d
[JS]スムーズにパネルを開閉するスクリプト -jQuery Sliding Panels
jQuery Sliding Panels jQuery Sliding PanelsはjQueryのプラグインで、ページの離れた場所にあるパネルの開閉、初期状態の設定(初期にパネルが開いている)、外部ファイルの読み込み(AJAXモード)に対応しています。
[JS]フラッシュみたいな動きをする画像ギャラリー -jqGalView.js
jqGalView.jsは、フラッシュの画像ギャラリーにインスパイアされたスクリプトで、jQueryのプラグインです。 jQuery: jqGalView (Photo Gallery) jqGalViewは、Flash Image Galleryにインスパイアされて作成したもので、一度に大量のサムネイル一覧を切り替えることができます。 Flash Image Gallery
[JS]外部ファイルのインポート・ロードに特化したスクリプト -Ajile.js
Ajile.jsは、外部ファイルのロード、インポート、インクルードやJavaScriptでの名前空間を扱うスクリプトです。 AJILE, the Advanced JavaScript Importing & Loading Extension brings Load Example 外部のJavaScriptをロードするデモ Namespace Example 名前空間にアクセスするデモ Include Example 外部のJavaScriptをインクルードするデモ Import Example 外部のfunctionをインポートするデモ Import Listener Example ファイルのインポートに関するデモ Import Module ワイルドカードを使用したインポートのデモ Dependency Example 外部ファイルに依存しているファイルをインポートするデモ Am
[JS]エレメントを開閉する3つのアコーディオンのスクリプト
スルスルと開閉動作するアコーディオンを実装するmootools.jsベースのスクリプトを3つ紹介します。 Accordion with color transition example
[JS]日本語版表示も可能なWikipediaと連動した元素周期表 -Dynamic Periodic Table
Dynamic Periodic Tableは、AJAXを利用しWikipediaのデータを表示させ、日本語など多数の言語に対応している元素周期表です。 Dynamic Periodic Table Dynamic Periodic Tableでは、元素周期表をPDFやPNG画像で出力することも可能です。 元素周期表は、他にもさまざまな見せ方で実装されています。 Jalenack's AJAX Periodic Table of the Elements JavaScriptを使用した周期表 A Periodic Table of Visualization Methods JavaScriptを使用した周期表 Periodic Table - Flash Version Flashを使用した周期表 Interactive Periodic Table Flashを使用した周期表 Davi
超簡単に画像にlightbox効果を与えられる『jQuery lightBox plugin』 | CREAMU
画像をクリックすると拡大してポップアップするデザインにしたい。 そんなあなたにおすすめなのが、『jQuery lightBox plugin』。超簡単に画像にlightbox効果を与えられるjavascriptだ。 『jQuery lightBox plugin』は、とてもシンプル。 <div id=”gallery”></div>といったタグで囲み、その中にimgタグを入れるだけで簡単にlightboxを実装できる。画像一つ一つにclassを割り当てたりする必要がなくていい。 また、カスタマイズも可能で、背景色を白以外に変えたり、透過度を変更したりすることができる。 サイトやブログのデザインを一歩前に進めるのに使えるのではないだろうか。 超簡単に画像にlightbox効果を与えられるjavascript、チェックして使っていきたいですね。 本を買いました。斉藤和義の初めての本な気がする。
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
ページ内に様々なwindowを表示するControl.Modal
ページ内に様々なwindowを表示するControl.Modal Control.ModalはLightBoxのようなウィンドウをページ内に表示するJavaScriptライブラリになります。 表示させる形態、表示できる内容が非常に豊富です。 設置方法 head要素内などでprototype.jsとcontrol.modal.jsを読み込みます。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="control.modal.js"></script> 準備はこれで終了です。 表示形式ごとに解説していきます。 Relative Modal ブロックレベル要素の内容を表示し、それ以外の箇所をグレイアウトします。 サンプル スタイルシートに以下のコードを追加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://jsajax.com/SamplesByID.aspx?id=676
http://jsajax.com/SamplesByID.aspx?id=286
ashishware.com: Site for programming and other things
http://www.jasonbartholme.com/2007/10/12/70-javascript-resources-for-every-web-developer/
» 10 Javascript Accordion Scripts
[JS]チェックボックスの数を制限するスクリプト -Limit number
[JS]立体的にシュルルと開閉するサイトマップ -SiteMap List: Vanilla
Deziner Folio» Blog Archive » Simple Javascript Accordions
