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);

如何创建像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)
})

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

1 个答案: