如何找到jQuery的小鼠滾動縮放因子

Question

• 極品縮放頁面時用戶使用Ctrl +滾動，

• 如果我發現了變焦倍數的意思是我基​​於因子放大當前頁面。

• 例如，當我得到縮放因子1.44。所以我將它轉換爲144％並進行縮放操作。

• 我在許多方面都在尋找。但我沒有得到結果。

• 請問如何從鼠標滾動查找變焦倍數？

• 我的代碼在下面 - 我在這裏找到this.zoomval？

請幫幫我！

var zoomFactor = scaleFactor; 
      var pageViewerContainer = $('#id'); 
      var pagecontainer = $('#id'); 
      this._selectionNodes = window.getSelection(); 
      if (!(this._selectionNodes.anchorOffset == 0 && this._selectionNodes.focusOffset == 0)) { 
       this._maintainSelection(); 
      } 
      if (isFactor) { 
       this._zoomVal = this._zoomVal + zoomFactor; 
      } 
      var w = pagecontainer.width(); 
      var h = pagecontainer.height(); 
      var zoomineventvalue = { currentZoomPercentage: 0, previousZoomPercentage: 0 }; 
      var vscrolBar = document.getElementById(this._id + '_viewerContainer'); 
      var vscrolValue = vscrolBar.scrollTop; 
      var scrollValue = (vscrolValue/this._previousZoom) * this._zoomVal; 
      var transform = "scale(" + this._zoomVal + "," + this._zoomVal + ")"; 
      for (var i = 1; i <= this._totalPages; i++) { 
       var leftpos = (this.element.width() - this._pageSize[i - 1].PageWidth * this._zoomVal)/2; 
       if (leftpos < 0 || this._fitType=="fitToWidth") 
        leftpos = 5; 
       var canvas = document.getElementById('pagecanvas_' + i); 
       var context = canvas.getContext('2d'); 
       canvas.height = this._pageSize[i - 1].PageHeight * this._zoomVal; 
       canvas.width = this._pageSize[i - 1].PageWidth * this._zoomVal; 
       canvas.style.height = this._pageSize[i - 1].PageHeight * this._zoomVal + 'px'; 
       canvas.style.width = this._pageSize[i - 1].PageWidth * this._zoomVal + 'px'; 
       var height = this._pageSize[i - 1].PageHeight * this._zoomVal; 
       var width = this._pageSize[i - 1].PageWidth * this._zoomVal; 
       canvas.style.width = width + "px"; 
       canvas.style.height = height + "px"; 
       context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); 
       var pagediv = $('#' + this._id + 'pageDiv_' + i); 
       pagediv[0].style.top = this._pageLocation[i] * this._zoomVal + "px"; 
       pagediv[0].style.left = leftpos + "px"; 

       //Hyperlink canvas 

       var hyperlinklayer = document.getElementById('selectioncanvas_' + i); 
       hyperlinklayer.style.height = canvas.height + 'px'; 
       hyperlinklayer.style.width = canvas.width + 'px'; 
       hyperlinklayer.style.position = 'absolute'; 
       hyperlinklayer.style.left = 0; 
       hyperlinklayer.style.top = 0; 
       hyperlinklayer.style.backgroundColor = 'transparent'; 
       hyperlinklayer.style.opacity = '0.2'; 
       hyperlinklayer.style.zIndex = '2'; 

       if (!this._isAutoZoom) { 
        //resizing the loding indicator of the page 
        $('#').css({ 'display': 'block', 'height': canvas.height + 'px', 'width': canvas.width + 'px','left':'0px','top':'0px' }); 
        var loadingindicator = document.getElementById(this._id + 'pageDiv_' + i + '_WaitingPopup'); 
        var spanDiv = loadingindicator.childNodes[0]; 
        spanDiv.style.top = (canvas.height - spanDiv.clientHeight)/2 + 'px'; 
       } 
      } 
      if (this._renderedCanvasList) 
       this._renderedCanvasList.length = 0; 

      if (this._zoomVal < 1) 
       pageViewerContainer.css({ '-ms-scroll-limit-y-max': (this._cummulativeHeight * this._zoomVal) - this.element.height() + 50 + "px" }); 
      else { 
       pageViewerContainer.css({ '-ms-scroll-limit-y-max': "" }); 
      } 
      vscrolBar.scrollTop = scrollValue; 
      this._eventpreviouszoomvalue = this._preZoomVal; 
      this._eventzoomvalue = this._zoomVal; 
      this._preZoomVal = this._zoomVal; 
      this._previousZoom = this._zoomVal; 
      zoomineventvalue.previousZoomPercentage = Math.round(this._eventpreviouszoomvalue * 100); 
      zoomineventvalue.currentZoomPercentage = Math.round(this._eventzoomvalue * 100); 
      this._raiseClientEvent("zoomChange", zoomineventvalue); 
      this.zoomPercentage = Math.round(this._zoomVal * 100); 

Answer 1

可以由原始之間的開口，然後結合的窗口調整大小事件和檢查比右後保存窗口寬度找到縮放因子（相對於第一文檔開口，其也可被縮放）大小和實際。

這是一個HTML例子：

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang=""> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Test Zoom</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
     <h2> 
     Original Document Width: <span id="originaldocumentwidth"></span> 
     </h2> 

     <h2> 
     New Document Width: <span id="newdocumentwidth"></span> 
     </h2> 

     <h2> 
     Zoom Factor: <span id="zoomratio"></span> 
     </h2> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 
     <script> 
     $(document).ready(function() { 
      var originaldocumentwidth = $(document).width(); 
      var newdocumentwidth = $(document).width(); 
      var zoomratio = originaldocumentwidth/newdocumentwidth; 

      function updateZoom() { 
       newdocumentwidth = $(document).width(); 
       zoomratio = originaldocumentwidth/newdocumentwidth; 

       $('#originaldocumentwidth').html(originaldocumentwidth); 
       $('#newdocumentwidth').html(newdocumentwidth); 
       $('#zoomratio').html(zoomratio); 
      } 
      $(window).resize(function() { 
       updateZoom(); 
      }); 
      updateZoom(); 
     }); 
     </script> 

    </body> 
</html> 

你可以看到它在行動上這個JSFIDDLE。