ペット プロジェクトとして取り組んでいるブラウザ ゲームのオーバーヘッド マップを作成しました。
固定サイズのビューポート div と、すべてのマップ アイコン要素を内部に含む内部 div があります。jquery-ui を使用して内側の div をドラッグ可能にしていますが、マウスホイールでズーム効果を与えたいと思っています。
グーグルで調べてみましたが、問題に対する良い解決策はないようです。
私はこれを試しました:
$('#map').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$("#map").css("width", "+=10");
}
else{
$("#map").css("width", "-=10");
}
});
しかし、それは何もしていないので、正しいイベントにバインドしていないと思います。(はい、私はその jquery コードを document(ready) 内で実行しています)