マウスホイールイベント取得用のprototype.js拡張サンプル
2006年11月29日-
スポンサード リンク
マウスホイールイベント取得用のprototype.js拡張サンプル。
標準のprototype.jsを使っても、マウスホイールイベントを簡単に取ることは出来ません。
ということで、prototype.js用の機能を拡張するJavaScriptコードのサンプルが公開されてます。
次のコードをwheel.jsなんかで保存してprototype.jsと一緒に読み込むと、Event.Observeにmousewheelが使えるようになります。
Object.extend(Event, {
wheel:function (event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) { delta = -event.detail/3; }
return Math.round(delta); //Safari Round
}
});
イベントハンドラの付与は、次のように、prototype.jsのEvent.observeで行います。
Event.Observe(document, "mousewheel", function (e) {
alert( Event.wheel(e) ); // マウスホイール回転時の処理
}, false);
是非とも、標準で組み込まれて欲しい機能ですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 1000以上の汎用アイコンセット「emblemicons」
- 過去のエントリ