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

Question

当光标悬停滑块时，背景也随光标悬停移动。（链接如下）

这是使用此效果的网站链接。 telemaruk

这个效果叫什么？以及如何实现这种效果？任何有用的链接plz 它是某种jquery插件或简单的css3效果。我想出来请帮忙。

Answer 1

我刚刚创建了一个小提琴，通过我对你的问题的评论向你展示我的意思。你应该能够从那里走得更远。

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上，移动图像，顶部图像比其他两个更多，第二个比最后一个更多。

这将产生预期的效果。