相对于光标的CSS背景位置
相对于光标的CSS背景位置
提问于 2015-04-15 09:59:13
我想知道如何实现这样的效果：http://www.gazprom.com/
(请注意顶部蓝色菜单中移动的蓝色背景)及其与光标位置的相关性)
是否有任何脚本跟随光标并更改背景位置样式？
Stack Overflow用户
回答已采纳
发布于 2015-04-15 10:06:31
这种效果可以通过使用小块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);工作演示
它的工作原理：
- 它在
mousemove事件上绑定document上的一个函数。 - 它使用
event.clientX抓取当前鼠标位置。 - 它以1/3的速度(
#header)改变了元素mousex/3的背景位置。参考文献
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29647194
复制相关文章
相似问题
腾讯云开发者
