javascript-在鼠标移动时放大图像：到达所有角落

我正在使用缩放功能.此缩放是一个固定框,其窗口大小为100％,而在图像内部则为固定框宽度的200％.

此缩放需要像这样工作：

>当光标位于窗口的中心时,图像应位于中心.
>当光标位于右上角时,图像应停留在窗口的右上角(因此,用该角到达图像)
>当光标位于底部的中间角时,图像应水平居中并到达底部的总和,因此我们可以看到图像的底部中间部分.
>依此类推.

我进门了,但是我不能完美地到达角落.这是我的代码片段(请参见onmousemove函数中的注释)：

var Zoom = function(imageZoom) {
  this.urlImage = imageZoom;
  this.img = undefined;
  this.$img = undefined;

  this.init = function() {
    this.loaders("on");
    this.calcs();
  };
  this.calcs = function() {
    var self = this;
    this.img = new Image();
    this.img.onload = function() {
      self.build();
    };
    this.img.src = this.urlImage;
  };
  this.loaders = function(status) {
    switch(status) {
      case "on":
        $('#loader').fadeIn(200);
        break;
      case "off":
        $('#loader').fadeOut(200);
        break;
    }
  };
  this.build = function() {
    var self = this;
    this.$img = $(self.img);
    
    $('#zoom').fadeIn(200).append(this.$img);
    
    this.$img.on('mousedown', function(e) {
      e.preventDefault();
    });
    
    // this is the problematic function
    $('body').on('mousemove', function(e) {
      e.preventDefault();
      // calc the percents of the window where
      var px = 100 * e.pageX / $(window).width(); 
      var py = 100 * e.pageY / $(window).height();

      // calc of the percent pixel of the image
      var fx = self.$img.width() * px / 100;
      var fy = self.$img.height() * py / 100;

      // render it left / 2 and top / 1.5 (the 1.5 value is imaginary!!)
      self.$img.css({'transform': 'translate('+ -(fx/2) +'px, '+ -(fy/1.5)+'px)'});
    });
    self.loaders("off");
  };
};

var zoom = new Zoom("http://dummyimage.com/2000x1230/000/fff");
zoom.init();

#zoom {
	position: fixed;;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	display: none;
}
#zoom img {
	width: 200%;
	height: auto;
	position: absolute;
	cursor: crosshair;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">Loading</div>
<div id="zoom"></div>

问题是我放了fx / 1.5,因为fx / 2不起作用.但是水平值可以正常工作.

我可以配置什么值才能到达各个角落？为什么左值(像素除以2)在顶值不起作用时能完美工作？

解决方法:

你真的很亲近您只需要在获取垂直百分比时计算image.height-window.height.

这也适用于不同的图像宽高比,因为在进行计算时会考虑图像高度.宽度不是问题,因为它始终是窗口宽度的两倍.

var Zoom = function(imageZoom) {
  this.urlImage = imageZoom;
  this.img = undefined;
  this.$img = undefined;

  this.init = function() {
    this.loaders("on");
    this.calcs();
  };
  this.calcs = function() {
    var self = this;
    this.img = new Image();
    this.img.onload = function() {
      self.build();
    };
    this.img.src = this.urlImage;
  };
  this.loaders = function(status) {
    switch (status) {
      case "on":
        $('#loader').fadeIn(200);
        break;
      case "off":
        $('#loader').fadeOut(200);
        break;
    }
  };
  this.build = function() {
    var self = this;
    this.$img = $(self.img);

    $('#zoom').fadeIn(200).append(this.$img);

    this.$img.on('mousedown', function(e) {
      e.preventDefault();
    });

    // this is the problematic function
    $('body').on('mousemove', function(e) {
      e.preventDefault();

      var wx = $(window).width();
      var wy = $(window).height();
      var iy = self.$img.height();

      var px = e.pageX;
      var py = e.pageY;

      var tx = -1 * (px / wx) * wx;
      var ty = -1 * (py / wy) * (iy - wy);

      self.$img.css({
        'transform': 'translate(' + tx + 'px, ' + ty + 'px)'
      });
    });
    self.loaders("off");
  };
};

var zoom = new Zoom("http://dummyimage.com/2000x1200/000/fff");
zoom.init();

#zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  display: none;
}
#zoom img {
  width: 200%;
  height: 100%;
  height: auto;
  position: absolute;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">Loading</div>
<div id="zoom"></div>

作为奖励：

如果要消除图像的高宽比(jsfiddle)时留下的空白区域,可以确保图像高度至少等于窗口高度(jsfiddle).但是,在这种情况下,您需要设置width：auto,因此图像的宽度不一定总是窗口的两倍.

标签：aspect-ratio,image-zoom,css,javascript,jquery
来源： https://codeday.me/bug/20191026/1939399.html