jQuery：Fullscreen“background”根据鼠标位置移动的图像 [英] jQuery: Fullscreen "background" image that moves according to mouse position
问题描述
我尝试实现根据鼠标位置移动的全屏背景。
因此，例如，如果您要将鼠标移动到左上角，视图端口将显示图像的左上角，并且图像的其余部分可以适合视图端口。在这种情况下，让我们说 - 屏幕是1280 * 960，但图像是1800 * 1300。
我以前看过这个，但我不记得我在哪里和我不能想这个术语用来描述我想要达到的目标。它不是视差或滚动背景图片...
寻找一个jQuery插件和开始CSS我需要完成它。
感谢任何人知道答案和解决方案！
/ p>
效果称为平移，您可以使用以下插件在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 /
I am trying implement a full screen background that moves according to the position of the mouse position.
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...
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.
The effect is called panning and you can use the following plugin for achieving this in jQuery:
http://manos.malihu.gr/jquery-image-panning/
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)
http://www.dnitza.com/super-simple-panning-background/
Another live example from a theme:
http://demo.undsgn.com/egofolio/light/portfolio/double-trouble/
这篇关于jQuery：Fullscreen“background”根据鼠标位置移动的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
