jquery - 在网页中创建由鼠标滚轮驱动的 "zoom in"和 "zoom out"

Question

我正在寻找与 autocad ... 或 solidworks 类似的体验

基本上是内容大小(保持宽高比)Xsize * Ysize

并放大特定区域

并且我已经将 ruby​​/rails 作为我选择的语言

Answer 1

看看 http://html5readiness.com/源代码。您可以在中间部分完全做到这一点。

这是从 Paul Irish HTML5Readiness 网站复制的:

jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {

  var newval,
      num = $('div.css-chart p').css('padding-left');

  delta = delta || e.detail || e.wheelDelta;

  if (delta > 0 || e.which == 38) {
      newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
  } else if (delta < 0 || e.which == 40) {
      newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
  } else {
      return true;
  }

  $('style.padleft').remove();
  $('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; } div.css-chart p i { width : '+2*newval+'px; } </style>')
      .appendTo(document.body);

  e.preventDefault();
});