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 .
一旦这个值错了，后面的放大计算就会出错。
所以修复的方法也很简单：保证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
}以上。