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演示放在了一起。我将在以后有更多时间时整理它，但它应该给你一个开始。

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

Answer 2

你应该包装imageWrapper div，使imageWrapper的大小应该是包含里面的所有图片，而largeWrapper使溢出隐藏，这样你就可以将内部div作为单个元素平移。（可能会使用负边距）

在mousemove jQuery / Javascript上pan div内容

2 个答案: