jQuery:根据鼠标位置移动的全屏“背景”图像

时间:2012-10-12 18:27:16

标签: jquery css background viewport

我正在尝试实现根据鼠标位置移动的全屏幕背景。

因此,例如,如果要将鼠标移动到左上角,则视图端口将显示图像的左上角以及可以适合视图端口的图像的其余部分。在这种情况下,让我们说 - 屏幕是1280 * 960,但图像是1800 * 1300。

Example

我以前见过这个,但我记不清楚在哪里,我想不出用来描述我想要达到的目的。它不是视差或滚动背景图像......

寻找一个jQuery插件和开始的CSS,我需要完成它。

感谢任何人都知道答案和解决方案!

1 个答案:

答案 0 :(得分:8)

这样有更明确的答案。

效果称为平移,您可以使用以下插件在jQuery中实现此目的:

http://manos.malihu.gr/jquery-image-panning/

这个例子也值得一看,只使用全屏图像从左到右平移(这是使用CSS封面,因此不适合跨浏览器,但如果你热衷于提供鼠标效果的关键概念在一个自定义的工作)

http://www.dnitza.com/super-simple-panning-background/

主题中的另一个实例:

http://demo.undsgn.com/egofolio/light/portfolio/double-trouble/