사용자가 Ctrl 키 +와</p></li> <li><p>을 스크롤 할 때 내가 요소를 기반으로 현재 페이지를 확대 말은 줌 배율을 찾을 경우

Question

• 필요 페이지를 확대에 JQuery와에 마우스 스크롤에서 요소를 확대 찾는 방법.

• 예를 들어 확대/축소 비율 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

, 오른쪽 일본어의 비를 개방 한 후, 윈도우 이벤트의 크기를 조정 바인딩 확인 후 윈도우 폭 저장하여 (또한 확대 할 수있는 첫 번째 문서 개구에 대하여) 줌잉 팩터를 발견 할 크기와 실제 크기.

<!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에 대한 조치에서 볼 수 있습니다

이

는 HTML의 예이다.