1 
$(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);

このようなマウスホイールでズーム可能な画像を作成するにはどうすればよいですか? しかし、隠しエリアがなければ？画像は位置が固定されています。ありがとう。

4

1 に答える 1

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)
})
于 2013-11-03T10:44:20.967 に答える