在淘宝页面中经常会见到鼠标放上商品照片后照片会放大，并且移动鼠标，放大区域也会变化，今天我们来完成方块跟着鼠标移动的案例
为了不占用页面位置，我们给方块设置为绝对位置 position：absolute，然后利用鼠标点击获取位置的方法：e.pageX 与 e.pageY 来获取鼠标当前位置，事件不再使用 click ，而是用mouseover，只要鼠标移动距离超过1px，就会执行该事件
varele=document.querySelector('div'); document.addEventListener('click',function(){ //先点击一次才会使方块显示ele.style.display='block'; document.addEventListener('mouseover',function(e){ //事件为鼠标移动就触发varx=e.pageX; //获取当前的x坐标vary=e.pageY; //获取当前的y坐标ele.style.left=x-50+'px'; // x-50 使鼠标位于盒子正中心ele.style.top=y-50+'px'; // y-50 使鼠标位于盒子正中心 }) })
完整代码：
<style>body{ background-color: rgb(124, 124, 124); } div{ position: absolute; width: 200px; height: 200px; background-color: rgb(229, 255, 0); display: none; } </style></head><body><div></div><script>varele=document.querySelector('div'); document.addEventListener('click',function(){ ele.style.display='block'; document.addEventListener('mouseover',function(e){ varx=e.pageX; vary=e.pageY; ele.style.left=x-50+'px'; ele.style.top=y-50+'px'; }) }) </script>
