知识点1：transform: translate(-50%, -50%)
在position: fixed的状态下将transform横竖调成-50%，之后用它弄成鼠标的精准度。top和left都为0
知识点2：pointer-events: none
解决层数关系，说白了抉择他的div都将成为 “只能看不能用的货色”
因为获取以后的div都会时时跟着你！你本来点击的按钮点上来是有效的！因为被你以后圆形的盒子挡住了！只有你用了pointer-events: none
那么这个圆形就成了陈设！不信你就点击下方的 干死我 这个按钮
知识点3：addEventListener
多动能的一个，在ec5里都是onclick，onmousemove！有他你就能间接写click，mousemove等
而且还有删除事件，比方当初的圆形圈太碍眼！那么就做一个按钮
function oooooo(){ 本来的圆形函数 } xxx.removeEventListener("click", oooooo)知识点4：a.style.cssText
a 和b一样
a.style.cssText = b.style.cssText = "left:" + e.clientX + "px;top:" + e.clientY + "px"
意思是a的style的 {} 里装 left：xxxx! 外面的e就是获取以后通过的相干参数！咱们抉择了e.clientX和Y
<p class="box">此处省略6万字</p><div class="a"></div><div class="b"></div><button id="xx"> 干死我 </button><style>body { background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596380156120&di=c9f3e71c29a91d37ddf77038a1812357&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56f62bab021a8.jpg') no-repeat; background-size: cover;} #xx { margin: auto; display: block; padding: 10px 64px; background: none; border: 1px solid #fff; color: #fff; } .box { line-height: 1.7; color: #fff; margin-top: 280px; padding: 10px 250px; text-align: center; } .a { width: 50px; height: 50px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.1s all; pointer-events: none; } .b { width: 8px; height: 8px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.15s all; pointer-events: none; } p:hover~.a { background: rgba(255, 255, 255, 0.22); border: none; } p:hover~.b { opacity: 0; }</style><script>var a = document.querySelector('.a');var b = document.querySelector('.b');document.addEventListener('mousemove', function(e){ a.style.cssText = b.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`})document.getElementById("xx").addEventListener('click', function(){ alert("此时胜利")})</script>