javascript - 我如何创建鼠标滚轮可缩放图像？

Question

$(document.createElement('img'))
          .width(imgW)
          .height(imgH)
          .addClass('img_full')
          .attr('src', $(this).attr('data-src'))
          .draggable()
          .css({
             'top': imgTop,
            'left': imgLeft
          }).bind('mousewheel DOMMouseScroll', function (e) {
               var delta = e.wheelDelta || -e.detail;
               this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
               e.preventDefault();
          }).mousewheel(function(e, delta) {
               //????
          }).appendTo(this);

如何创建像这样的鼠标滚轮可缩放图像？但是没有隐藏区域？图像位置固定。谢谢。

Answer 1

我找到了答案（//???? 替换）：

var curX = e.clientX,
    curY = e.clientY,
    oldL = parseInt($(this).css('left'), 10),
    oldT = parseInt($(this).css('top'), 10),
    oldW = parseFloat($(this).width()),
    oldH = parseFloat($(this).height()),
    newW = oldW * (delta > 0 ? 1.25 : 0.8),
    newH = oldH * (delta > 0 ? 1.25 : 0.8);
$(this)
.width(newW)
.height(newH)
.css({
    'left': parseInt(curX - (newW/oldW) * (curX - oldL), 10),
    'top': parseInt(curY - (newH/oldH) * (curY - oldT), 10)
})