javascript - 相对于光标的 CSS 背景位置

Question

我想知道如何做这样的效果: http://www.gazprom.com/

(请注意，移动的蓝色背景，在顶部蓝色菜单中)，以及它与光标位置的相关性)

有没有跟随光标改变背景位置样式的脚本？

Answer 1

可以使用一小段 JavaScript 实现此效果:

JavaScript

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

Working Demo

工作原理:

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