jquery - 使用css和jquery实现放大效果

Question

我为我正在开发的一个浏览器游戏创建了一个俯 View ，作为我的宠物元素。

我有一个固定大小的视口(viewport) div 和一个内部 div，里面有我的所有 map 图标元素。我使用 jquery-ui 使内部 div 可拖动，但我也希望能够使用鼠标滚轮为其提供缩放效果。

我已经进行了一些谷歌搜索，但似乎没有任何好的解决方案。

我尝试过这个:

$('#map').bind('DOMMouseScroll mousewheel', function(e){
  if(e.originalEvent.wheelDelta /120 > 0) {
    $("#map").css("width", "+=10");
  }
  else{
    $("#map").css("width", "-=10");
  }
});

但它没有做任何事情，所以我想我没有绑定(bind)到正确的事件。 (是的，我正在文档中运行 jquery 代码(就绪))

Answer 1

想通了。这是后代的代码:

$('#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 });
    }
  }