## 当鼠标放到页面上移动时，盒子跟随鼠标移动 ``` <style> div{ width: 100px; height: 100px; background-color: #f0f; position: absolute; left:0; top:0; } </style> <h2>鼠标绑定小盒子</h2> <div id="div"></div> <script> // 逻辑：1.先获取鼠标的X、Y坐标 // 2.给div进行位置赋值 left 、 top let div = document.getElementById('div'); document.onmousemove = function(e){ let event = e || window.event; // console.log(event); div.style.left = event.clientX-div.clientWidth/2+'px'; div.style.top = event.clientY-div.clientHeight/2+'px'; } </script> ``` 鼠标移动触发，打印的event：