jQuery的：普＆QUOT;背景＆QUOT;图像，根据鼠标的位置移动 [英] jQuery: Fullscreen "background" image that moves according to mouse position

问题描述

我想实现，根据鼠标位置的位置移动全屏幕背景。

I am trying implement a full screen background that moves according to the position of the mouse position.

因此​​，例如，如果你要移动鼠标到左上角，将视口将显示的图像的左上角和可以装配到观察口的图像的其余部分。在这种情况下，让我们说 - 屏幕为1280 * 960，但图像是1800 * 1300

So for example, if you were to move the mouse to the top left, the view port would show the top left of the image and the rest of the image that can fit into the view port. In this case, let's say - the screen is 1280 * 960, but the image is 1800 * 1300.

我以前见过，但我不记得在那里，我不能想用来形容什么，我试图达到的期限。这不是视差或滚动的背景图片...

I've seen this before, but I can't remember where and I can't think of the term used to describe what I'm trying to achieve. It's not parallax or scrolling background images...

寻找一个jQuery插件，并开始CSS我需要去完成它。

Looking for a jQuery plugin and the beginning CSS I'll need to complete it.

由于任何人知道答案和解决方案！

Thanks to whomever knows the answer and solution!

推荐答案

只是让这有一个更清晰的答案。

Just so this has a clearer answer.

该效应被称为平移，您可以使用以下插件jQuery中实现这一点：

The effect is called panning and you can use the following plugin for achieving this in jQuery:

<一个href=\"http://manos.malihu.gr/jquery-image-panning/\">http://manos.malihu.gr/jquery-image-panning/

这也是值得考虑看看这个例子只是使用全屏图像（这是使用CSS盖这么不理想的跨浏览器平移左到右，但在效果提供了鼠标的关键概念，如果你热衷在自定义作业）

It's also worth taking a look at this example for just panning left to right using a fullscreen image (this is using CSS cover so not ideal for cross browser, but provides the key concepts for the mouse over effect if you're keen on a custom job)

<一个href=\"http://www.dnitza.com/super-simple-panning-background/\">http://www.dnitza.com/super-simple-panning-background/

这是一个主题的另一个活生生的例子：

Another live example from a theme:

<一个href=\"http://demo.undsgn.com/egofolio/light/portfolio/double-trouble/\">http://demo.undsgn.com/egofolio/light/portfolio/double-trouble/

这篇关于jQuery的：普＆QUOT;背景＆QUOT;图像，根据鼠标的位置移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！