2

ペット プロジェクトとして取り組んでいるブラウザ ゲームのオーバーヘッド マップを作成しました。

固定サイズのビューポート 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) 内で実行しています)

4

1 に答える 1

0

理解した。後世のコードは次のとおりです。

$('#map').bind('mousewheel DOMMouseScroll', function(e){
  //Get the transformation matrix from the css as a string. (it's named differently for different browsers)
  var scale = $(this).css('transform');
  scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
  scale = (scale == null ? $(this).css('-ms-transform') : scale);
  //once we have the matrix, the scale is the first number, so parse the string to remove it.
  scale = scale.split(" ");
  scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

  //e.originalEvent tells us how the mousewheel moves. (Also different for different systems)
  e.delta = null;
  if (e.originalEvent) {
    if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
    if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
    if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
  }
  //If delta is greater than 0, we're zooming in
  if(e.delta > 0) { 
    //5x zoom is the max that I want to zoom in.
    if(scale < 5) {
      //no need to re-form the matrix. specifying a new scale value will do the job.
      scale = ('scale(' + (scale + .1).toString() + ')');
      //update the transform css for each possible browser. 
      $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
    }
  }
  //if delta is less than zero, we're zooming out
  else{
    //for my purposes, I don't want to zoom out farther than the original map size
    if(scale > 1) {
      scale = ('scale(' + (scale - .1).toString() + ')');
      $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
    }
  }
于 2013-10-17T19:25:59.797 に答える