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
}

以上。

smartJQueryZoom(smartZoom) 存在的兼容性BUG,以及解决方法的更多相关文章

  1. 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法

    时间 2014-03-18 18:00:55 eoe博客 原文  http://my.eoe.cn/916054/archive/24053.html 主题 安卓开发 自从Android3.0引入了F ...

  2. ios/iphone手机请求微信用户头像错位BUG及解决方法

    转:http://www.jslover.com/code/527.html ios/iphone手机请求微信用户头像错位BUG及解决方法 发布时间:2014-12-01 16:37:01 评论数:0 ...

  3. ie下没有背景色bug的解决方法

    鼠标经过下面的二级菜单的时候,在ie下面,收缩上去了,给这个二级菜单加了背景后,就是正常的,这个是ie下面的一个bug,解决方法:background-img:url(123.jpg):url里面的图 ...

  4. 微擎系统BUG漏洞解决方法汇总(原创)

    微擎微赞系统BUG漏洞解决方法汇总 弄了微擎系统来玩玩,发觉这个系统BUG还不少,阿里云的提醒都一大堆,主要是没有针对SQL注入做预防,处理的办法基本都是用转义函数. 汇总: 1. 漏洞名称: 微擎任 ...

  5. 微擎系统BUG漏洞解决方法汇总

    微擎微赞系统BUG漏洞解决方法汇总 弄了微擎系统来玩玩,发觉这个系统BUG还不少,阿里云的提醒都一大堆,主要是没有针对SQL注入做预防,处理的办法基本都是用转义函数. 汇总: 1. 漏洞名称: 微擎任 ...

  6. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  7. Arduino下LCD1602综合探究(下)——如何减少1602的连线,LiquidCrystal库,LiquidCrystal库中bug的解决方法

    一.前言: 上文中,笔者系统的阐述了1602的两种驱动方式,并简单的提到了Arduino的LiquidCrystal库.本文紧接上文,对以下两个问题进行更加深入的探讨:如何能够使1602对Arduin ...

  8. 10个常见的IE bug和解决方法

    1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explor ...

  9. IE6/7/8 CSS兼容性问题和解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

随机推荐

  1. 01.scrapy入门

    Scrapy快速入门 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,它使用Twisted这个异步网络库来处理网络通讯,架构清晰,并且包含了各种中间件接口,可以灵活的完成各种需求. ...

  2. Python3-threading模块-多线程

    什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 P ...

  3. 入门大数据---Spark累加器与广播变量

    一.简介 在 Spark 中,提供了两种类型的共享变量:累加器 (accumulator) 与广播变量 (broadcast variable): 累加器:用来对信息进行聚合,主要用于累计计数等场景: ...

  4. 读取和写入blob类型数据

    读写oracle  blob类型 http://zyw090111.iteye.com/blog/607869 http://blog.csdn.net/jeryjeryjery/article/de ...

  5. 服务认证(JWT)

    上一篇已经讲了微服务组件中的 路由网关(Zuul),但是未介绍服务认证相关,本章主要讲解基于Spring Security 与 JJWT 实现 JWT(JSON Web Token)为接口做授权处理… ...

  6. Linux文件权限学习笔记

    文件权限共10个字符,第一个字符表示该文件是[文件夹]或[文件]——如果是字符“d"则表示该文件是文件夹:如果是字符“-”则表示是文件. 后九个字符,三个一组,共三组,分别表示[所有者权限] ...

  7. sharepoint 2010项目中,ashx页面获取SPContext.Current 为null的原因和解决方法

    //错误的写法 public void ProcessRequest(HttpContext context) { SPSecurity.RunWithElevatedPrivileges(deleg ...

  8. CentOS 6.4 安装 rar软件(tar.gz 包)并注册成功

    1.下载地址: www.rarlab.com/download.htm 2.解压tar.gz文件(cd进入文件目录) # cd /home/wjshan0808/Documents # ls rarl ...

  9. lodash - slice

    稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说,JavaScript 中的数组都是稀疏数组-它们可以拥有空槽,所谓空槽,指的就是数组的某个位置没有任何值,既不是 undefined ...

  10. 初探pandas——安装和了解pandas数据结构

    安装pandas 通过python pip安装pandas pip install pandas pandas数据结构 pandas常用数据结构包括:Series和DataFrame Series S ...