如何在jquery中从鼠标滚动中找到缩放因子

how to find Zooming factor from mouse scrolling in jquery

本文关键字：缩放 滚动 鼠标 jquery      更新时间：2023-09-26

  • 用户使用ctrl+、滚动时需要缩放页面

  • 如果我发现缩放因子意味着我会根据因子缩放当前页面。

  • 例如，当我得到缩放因子1.44时。所以我将其转换为144%并进行缩放操作。

  • 我在很多方面寻找。但我没有得到结果。

  • 你能告诉我如何从鼠标滚动中找到缩放因子吗？

  • 我的代码在下面-我想在这里找到这个。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);

您可以通过在打开后立即保存窗口宽度，然后绑定窗口大小调整事件并检查原始大小与实际大小之间的比率来找到缩放因子(相对于第一次打开文档，也可以缩放(。

这是一个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上看到它的作用。

相关文章：