gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:39:39 26 4
gpt4 key购买 nike

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

<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 的内容。

任何帮助将不胜感激!

最佳答案

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

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

关于javascript - mousemove jQuery/Javascript 上的 Pan div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6722612/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com