zoukankan      html  css  js  c++  java
  • smartJQueryZoom(smartZoom) 存在的兼容性BUG,以及解决方法

    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
        }

    以上。

  • 相关阅读:
    Python 音视频方面资源大全
    MD5( 信息摘要算法)的概念原理及python代码的实现
    base64编解码学习及python代码实现
    操作系统下cache的几个概念
    scp 跨机远程拷贝
    VIM -小技巧汇总
    python中的进制转换
    linux目录跳转快捷方式——z武器
    ubuntu 16.04 清空log文件的方法
    【linux】crontab失效
  • 原文地址:https://www.cnblogs.com/foxcharon/p/11352838.html
Copyright © 2011-2022 走看看