相对于光标的CSS背景位置

时间:2015-04-15 09:59:14

标签: javascript css background position

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

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

是否有任何脚本跟随光标并更改背景位置样式?

1 个答案:

答案 0 :(得分: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. 它会对mousemove上的document事件绑定一个函数。
  2. 使用event.clientX抓取当前鼠标位置。
  3. 它以1/3的速度(#header)更改元素mousex/3的背景位置。 Reference