如何使用jQuery正确平移大于其容器的图像？
我正在创建一个非常酷的图像查看器，但我陷入了一个特定的部分：在放大时平移图像。这似乎是一个微不足道的问题，我已经尝试了几乎所有关于SO的类似问题的答案，但每一次，某事工作不对。 我需要一双新鲜的眼睛。
我在我的开发服务器上暂时打开了一个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轴上正确平移方向
- 不应该在图像边缘外平移
- 合理流畅的淘选
- 很高兴：窗口resize不应该导致任何问题
虽然我感谢我能得到的任何帮助，但请不要指向我的通用插件，我已经尝试了太多其他我正在寻找适用于我的特定场景的答案。 我非常绝望，我甚至会为满足上述特征的完美解决方案设定奖金。
PS：请尝试使用Firefox或Webkit浏览器中的链接
我有一些替代插件供你的工作。 尝试这些jquery插件。
http://kvcodes.com/2014/02/jquery-plugins-for-containerdiv-zoom/