JavaScriptでホイール操作（拡大縮小）を実現したいサル

Googleマップ等で実現されているマウスホイール操作をやってみたくなってトライ。クロスブラウザ対応が大変手間で、マウスホイールをどっちに回転させたかまでは取得できたが、ここから先がムリ。サルが考えていたのはユーザがドラッグ操作で自由に配置した要素たちを、位置、サイズ、フォント等全てホイール操作で拡大縮小したかったんだけど難しい。今までFirefoxを素敵なブラウザと思っていたけど、今回はやられた。style属性のwidthやheightの値を除算したあと乗算したらもとの値に戻らない。style属性の値として有効な値と端数処理がブラウザごとに違う様子。もう一度チャレンジする気になれなさそうなので、誰かが素敵なライブラリを作ってくれるのを待つ。

<div id="hoge" style="border: 1px solid; width: 300px;height: 300px;"></div>

<script language="javascript">

function wheel(event){

 var zoom = 0;

 if (!event) event = window.event;

 if (event.detail)
  zoom = -event.detail / 3;
 else if (event.wheelDelta)
  zoom = event.wheelDelta / 120;
 else zoom = 0;
 
 var elem = document.getElementById('hoge');
 elem.innerHTML = "zoom = " + zoom;
}

var hoge = document.getElementById('hoge');
if (hoge.addEventListener) hoge.addEventListener('DOMMouseScroll', wheel, false);
hoge.onmousewheel = hoge.onmousewheel = wheel;

</script>