Amplie uma imagem ao mover o mouse: atingindo todos os cantos
Estou trabalhando em uma funcionalidade de zoom. Esse zoom é uma caixa fixa com 100% do tamanho da janela e dentro de uma imagem com 200% da largura da caixa fixa.
Esse zoom precisa funcionar assim:
Quando o cursor está no centro da janela, a imagem deve estar no centro.Quando o cursor está no canto superior direito, a imagem deve permanecer no canto superior direito da janela (para alcançar a imagem com o canto)Quando o cursor está no canto inferior central, a imagem deve centralizar horizontalmente e atingir o total inferior, para que possamos ver a parte inferior central da imagem.E assim por diante.Faço uma abordagem, mas não consigo alcançar os cantos perfeitamente. Este é o meu trecho (veja os comentários na função 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>
O problema é que eu coloquei ofx/1.5
Porquefx/2
não funciona Mas o valor horizontal funciona perfeitamente.
Qual valor posso configurar para alcançar todos os cantos? Por que o valor esquerdo (divisão dos pixels por 2) funciona perfeitamente quando o valor superior não?