7
我创建了一个很酷的图像查看器，但卡在一个特定的部分：放大时平移图像。这似乎是一个微不足道的问题，我已经尝试了几乎所有关于SO的类似问题的答案，但每次，某些工作不正确。我需要一双新鲜的眼睛。如何使用jQuery正确地放大比其容器大的图像？
我已经在我的开发服务器上临时打开了一个URL。看看这个页面：
[URL关闭]
接下来，向上移动鼠标滚轮来触发变焦。我们到了。放大后，点击并拖动以尝试平移图像。它正在平移，但有些不对。这是目前用于平移代码：
var clicking = false;
var previousX;
var previousY;
$("#bigimage").mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).mouseup(function() {
clicking = false;
});
$("#bigimage").mousemove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
$("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
previousX = e.clientX;
previousY = e.clientY;
}
});
我正在寻找解决方案具有以下特性：
- 平移在X和Y轴的方向正确
- 它不应该是可以在图像的边缘外部平移
- 合理流畅的平移
- 不错：窗口大小调整不应引起任何问题
尽管我很欣赏我可以获得的任何帮助，但请不要将我指向一个通用插件，我已经尝试过太多，因此我正在寻找适用于特定场景的答案。我非常绝望，我甚至会为满足上述特征的完美解决方案设置金钱赏金。
PS：请尝试在Firefox或链接一个WebKit浏览器
你能描述什么不工作，并提供小提琴吗？据我所知，在没有缩放的情况下，图像已经出现了一些平移问题。我以前创建了一个背景平移脚本，只需移动鼠标，看到[这个答案]（http://stackoverflow.com/questions/7776843/mouse-on-left-of-screen-move-image-to-left - 鼠标右键同屏/ 7777153＃7777153）获得灵感。 –
@RobW谢谢，但有了背景图像的方法将是整个事情的一个重大改革，太多的依赖关系，我想整个放弃这个功能。我希望它可以使用滚动方法修复。 – Ferdy
正如你可以在我的小提琴中看到的那样，平移并不困难，并且可以高效地完成。您的问题可能是由于编写代码而不考虑如何有效地实现它。缩放可以通过使用适当的逻辑和'background-size' CSS属性轻松完成。我已经实施了平移。将两者加在一起会产生所需的功能。如果你提供了一些相关的代码，我可能会考虑看看它。 –