javascript - 如何根据光标悬停移动背景？

Question

当光标悬停在滑块上时，背景也会随着光标悬停而移动。（下面的链接）

这是使用此效果的网站链接。 泰勒马鲁克

这种效果叫什么？以及如何达到这个效果？任何有用的链接请它是某种 jquery 插件或简单的 css3 效果。我想不通请帮忙。

Answer 1

我刚刚创建了一个 Fiddle 来向您展示我对您问题的评论的意思。你应该可以从那里走得更远。

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);

至于解释这里发生了什么：

• mousemove它在事件上绑定一个函数document。
• 它使用 抓取当前鼠标位置event.clientX。
• #header它以 1/3 的速度 ( mousex/3)改变元素的背景位置。

现场检查：FIDDLE

如果你想要与你链接的那个网站完全相同的东西，你应该有几个 div 彼此重叠，并以另一个速度移动它们的背景位置。在这个例子中，它移动了鼠标速度的 1/3。

Answer 2

看看这些插件，它的视差效果是你想要的。

http://stephband.info/jparallax/

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

Answer 3

您需要的是将三张图像叠加在一起。

1. 您需要根据您的要求设置它们的不透明度。
2. 设置图像的 z-index，使它们重叠并使位置成为绝对位置。
3. 打开mouseover，移动图像，顶部图像比其他两个多，第二个比最后一个多。

这将产生预期的效果。