2012-10-12 92 views
3

我正在嘗試實現根據鼠標位置移動的全屏幕背景。jQuery:根據鼠標位置移動的全屏「背景」圖像

因此,例如,如果您要將鼠標移動到左上角,則視圖端口將顯示圖像的左上角以及可以放入視圖端口的圖像的其餘部分。在這種情況下,讓我們說 - 屏幕是1280 * 960,但圖像是1800 * 1300

Example

我以前見過,但我不記得在那裏,我不能想想這個術語用來描述我想要達到的目標。這不是視差或滾動背景圖像...

尋找一個jQuery插件和開始的CSS我需要完成它。

感謝誰知道答案和解決方案!

+0

使用jQuery的mousemove事件。在它中你可以接收鼠標指針的實際座標,並相應地對該位置作出反應。 –

+3

這種效果稱爲「平移」檢查這個jquery插件http://manos.malihu.gr/jquery-image-panning – Paradise

+0

天堂,如果你提交作爲一個單獨的迴應,我會讓你成爲贏家! – hatfieldajoshua

回答

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/