[英]How i can create a mousewheel zoomable image?
$(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);
如何創建像這樣的鼠標滾輪可縮放圖像? 但是沒有隱藏區域? 圖片位置固定。 謝謝。
我找到了答案(// ????已替換):
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)
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.