javascript - mousemove jQuery/Javascript 上的 Pan div 内容

Question

好的，这就是我所拥有的:

<div id="imageWrapper">
   <img src="image.jpg" alt="image" width="250px" height="180px" />
   <img src="image.jpg" alt="image" width="250px" height="180px" />
   <img src="image.jpg" alt="image" width="250px" height="180px" />
   <img src="image.jpg" alt="image" width="250px" height="180px" />
   <img src="image.jpg" alt="image" width="250px" height="180px" />
   ...
</div>

imageWrapper div 有一个设置的宽度/高度和溢出:通过 CSS 隐藏，然后里面的很多图像缩略图加在一起，比父 div 大。

我想要实现的是，当您的鼠标位于 imageWrapper div 内并且您移动鼠标时，拇指会根据位置水平/垂直滚动，以便能够滚动并查看所有拇指？

我尝试过许多 jQuery 插件，但它们似乎都适合平移单个大图像而不是 div 的内容。

任何帮助将不胜感激!

Answer 1

我很快把这个 jsfiddle一起演示。当我以后有更多时间时，我会整理它，但它应该给你一个开始。

它的基础是通过将图像复制到视口(viewport)外的另一个 div 来获取图像的完整宽度和高度。一旦计算出来，我就可以计算出当鼠标移到包装 div 上时应该滚动的百分比。