Javascript滚动图像边缘检测

Question

目前我正在尝试使用我想要创建的一个小图像缩放/滚动脚本，是的，我知道有插件可以做到这一点，但我正在为轻量级版本和学习开发。我现在面临的主要问题是，我不确定如何将图像滚动限制为仅限图像的宽度和高度。我想设置我的脚本，以便在用户达到图像的ceartin宽度或高度时停止图像滚动，以阻止图像滚动到div之外。下面是我的脚本的小提示，任何建议或提示，以帮助我朝正确的方向前进将非常感谢click here to go to fiddle

Answer 1

我刚刚建立了其中一个。

原则是你要听三个事件：mousedown，mouseup和mousemove。

首先，最好使用div，然后将图片设置为background-image的{​​{1}}。这允许您使用div在background-position内移动图像。我们称之为div div。

在#container上，您可以记录图像背景位置的坐标。在页面加载时，这些将是mousedown（除非你已经告诉它是别的;我们假设你没有）。触发0 0事件时，这实际上是拖动操作的开始，因此您可能希望设置某种mousedown变量。

在draggingStarted上，您要检查mousemove是否为真。如果是，请计算出鼠标光标移动的相对距离，并相应地更改背景图像坐标。

在draggingStarted上，您要将mouseup变量设置为false。这样，如果触发draggingStarted事件，图像位置将保持不变。

现在，您要问的问题是到目前为止给出的解决方案允许背景位置坐标超过图像，因此我们将获得部分空白mousemove。 此问题的解决方案是记录图像的尺寸，然后当您计算移动背景图像的距离时（在#container函数中），检查以查看新背景图像坐标是否在图像边界之外。如果是，请不要允许！