我正在研究缩放功能。此缩放是一个具有 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 https://jsfiddle.net/ozzan/6f53j6hx/1/），您可以确保图像高度至少等于窗口高度（jsfiddle https://jsfiddle.net/ozzan/6f53j6hx/3/）。但是，您需要设置width: auto在这种情况下，图像并不总是窗口宽的两倍。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
