标签：全局 clientx 说明 root png 有用 css function bsp
大概是CSS3吧,出了一个叫CSS变量的东西，也叫自定义属性，还是比较有用的东东，可以用JavaScript灵活控制，变量作用
我们来实现一个div跟随鼠标滚动的小东西用来说明如何自定义变量
:root{//全局变量 --mouse-x: 0px; --mouse-y: 0px; } .mover{ width: 100px; height: 100px; background:lightblue; }
HTML代码如下：
<div class="mover"></div>
JavaScript代码，我们来写一段监听，处理变量值
let root = document.documentElement root.addEventListener(‘mousemove‘, e => { root.style.setProperty(‘--mouse-x‘, e.clientX + ‘px‘) root.style.setProperty(‘--mouse-y‘, e.clientY + ‘px‘) })
这样就实现了我们想要的效果，当然啦，如果用JQ可能更简便些。
$(document).mousemove(function(e){ $(‘.mover‘).css({"margin-top":e.clientY+"px","margin-left":e.clientX+"px"}).text(e.clientX+","+e.clientY); // })
实现效果如下：
标签：全局 clientx 说明 root png 有用 css function bsp
原文地址：https://www.cnblogs.com/fengju8899/p/9729551.html
