smartJQueryZoom 是一个很好用的库。
它基于jQuery，可以对某个元素（比如 img）进行渲染，渲染之后可以放大这个区域，在做图片浏览时很好用。
但它有一个兼容性BUG：
当浏览器不是chrome（比如safari）时，放大倍率会出现问题：滚轮滚一下，就直接到了最大倍率。
为了修复这个BUG，我看了一下这个库的源码。
// listening mouse and touch events if(settings.touchEnabled == true) targetElement.bind(‘touchstart.smartZoom‘, touchStartHandler); if(settings.mouseEnabled == true){ if(settings.mouseMoveEnabled == true) targetElement.bind(‘mousedown.smartZoom‘, mouseDownHandler); if(settings.scrollEnabled == true){ containerDiv.bind(‘mousewheel.smartZoom‘, mouseWheelHandler); containerDiv.bind( ‘mousewheel.smartZoom DOMMouseScroll.smartZoom‘, containerMouseWheelHander); } if(settings.dblClickEnabled == true && settings.zoomOnSimpleClick == false) containerDiv.bind(‘dblclick.smartZoom‘, mouseDblClickHandler); } document.ondragstart = function () { return false; }; // allow to remove browser default drag behaviour if(settings.adjustOnResize == true) $(window).bind(‘resize.smartZoom‘, windowResizeEventHandler); // call "adjustToContainer" on resize if(settings.initCallback != null) // call callback function after plugin initialization settings.initCallback.apply(this, targetElement); },
红色字的方法：
/** * call zoom function on mouse wheel event * @param {Object} e : mouse event * @param {Object} delta : wheel direction 1 or -1 */ function mouseWheelHandler(e, delta){ var smartData = targetElement.data(‘smartZoomData‘); if(smartData.currentWheelDelta*delta < 0) // if current and delta have != sign we set 0 to go to other direction smartData.currentWheelDelta = 0; smartData.currentWheelDelta += delta; // increment delta zoom faster when the user use wheel again publicMethods.zoom(smartData.mouseWheelDeltaFactor*smartData.currentWheelDelta, {"x":e.pageX, "y":e.pageY}); // 0.15 }
注意这个注释：
@param {Object} delta : wheel direction 1 or -1
作者默认 delta 是 1 或者 -1 ，但是其实并不是如此。
比如在safari上，这个值是 40 或者 -40 .
一旦这个值错了，后面的放大计算就会出错。
所以修复的方法也很简单：保证delta永远是 1 或者 -1 就行了。
function mouseWheelHandler(e, delta){ var smartData = targetElement.data(‘smartZoomData‘); // if delta !== 1 if (delta > 1) { delta = 1 } else if (delta < -1) { delta = -1 } // end if(smartData.currentWheelDelta*delta < 0) // if current and delta have != sign we set 0 to go to other direction smartData.currentWheelDelta = 0; smartData.currentWheelDelta += delta; // increment delta zoom faster when the user use wheel again publicMethods.zoom(smartData.mouseWheelDeltaFactor*smartData.currentWheelDelta, {"x":e.pageX, "y":e.pageY}); // 0.15 }
以上。
smartJQueryZoom(smartZoom) 存在的兼容性BUG，以及解决方法
原文：https://www.cnblogs.com/foxcharon/p/11352838.html