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

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.