Создание «увеличения» и «уменьшения» с помощью колеса прокрутки мыши на веб-страницах

Question

Я ищу опыт, аналогичный AutoCAD ... или SolidWorks

в основном размеры контента (поддержание соотношения сторон) Xsize * Ysize

и увеличивает определенные области

и я выбрал ruby ​​/ rails в качестве языка выбора

Answer 1

Взгляните на исходный код http://html5readiness.com/.Вы можете сделать именно это в центральной части.

Это скопировано с веб-сайта 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();
});

Answer 2

Другим вариантом является Zoom.js (http://lab.hakim.se/zoom-js/), который увеличивает указанный элемент, или Presenteer.js (http://willemmulder.github.com/Presenteer.js/), который может центрировать указанные элементы в области просмотра, а также принимает преобразования CSS3 (например,вращение, перевод) этих элементов во внимание.