如何根據光標懸停來移動背景？

當光標懸停在滑塊上時，背景也隨光標盤旋而移動。（以下鏈接）如何根據光標懸停來移動背景？

這裏是鏈接到使用此效果的網站。 telemaruk

這個效果叫什麼？以及如何實現這一效果？任何有用的鏈接plz 它是某種jQuery插件或簡單的css3效果。我不知道請幫忙。

2013-08-22 hfarazm

創建一個將更新背景的位置窗口上mousemove事件。您可能必須使用半透明背景才能獲得與該網站相同的效果。 – Broxzier

我剛剛創建了一個小提示，向您展示我對我的問題發表評論的意思。你應該能夠從那裏走得更遠。

document.addEventListener('mousemove', function (event) { 
    if (window.event) { // IE fix 
     event = window.event; 
    } 

    // Grab the mouse's X-position. 
    var mousex = event.clientX; 
    var header = document.getElementById('header'); 
    header.style.backgroundPosition = mousex/3 + 'px 0'; 
}, false);

至於解釋這裏發生了什麼：

它結合上document的mousemove事件的功能。
它使用event.clientX獲取當前鼠標位置。
它將元素#header的背景位置更改爲速度的三分之一（mousex/3）。

檢查現場：FIDDLE

如果你想爲網站您鏈接完全一樣的事情，你應該有幾個div的超過對方，並在另一速度移動他們的背景位置。在這個例子中，它從鼠標的速度移動1/3。

來源

2013-08-22 07:18:59 Broxzier

感謝它的幫助 – hfarazm

@FarazMukhtar很高興幫助你。使用這段代碼也不需要插件，因此頁面加載和執行速度更快。你甚至不需要這個jQuery。 – Broxzier

是的，它看起來更平滑，代碼更易於理解 – hfarazm

你需要的是有三個圖像在另一個上。

您需要根據您的要求設置其不透明度。
設置圖像的z-index，使它們重疊並使位置絕對。
對mouseover，移動圖像，頂部圖像比其他兩個更多，第二個比上一個更多。

這會產生期望的效果。

來源

2013-08-22 07:17:50 Aashray

看看這些插件，它的視差效果你的目的。

http://stephband.info/jparallax/

http://bmc.erin.utoronto.ca/~walid/newmediasite/parallax/files/parallax.html

來源

2013-08-22 07:25:56

謝謝。這正是我所期待的。 – hfarazm

如何根據光標懸停來移動背景？

回答

相關問題