js div随鼠标移动

这几天一直补作业，今天来更新了。之前访问其他博客时，我看见有些图案可以随鼠标移动的效果，是那种浮动的，今天我们就做一个简单的div随鼠标移动吧
效果 可以随鼠标随意移动喔

 #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
        }

html代码，就简单的div图片

 <box id="box1"></box>

js代码

  window.onload=function(){
           //使div可以随鼠标移动
           //获取box1
           var box1=document.getElementById("box1");
           document.onmousemove=function(event){
  //这里event事件对象，当事件响应函数被触发时，浏览器每次都会将事件对象
  //作为实参传递，就算不写形参也会传递，但是写了之后，更容易调用
               //获取滚动条的距离
               var st=document.documentElement.scrollTop;
               console.log(st);
               //获取鼠标的坐标
               var left=event.clientX;
               var top=event.clientY;
               box1.style.left=left+st+"px";
               box1.style.top=top+st+"px";
                      }
        }

1.由于使用了box1.style.left，一定注意偏移量只对开启定位的元素有效，所以box一定要开启相对或者绝对定位，
2.并且注意 div的偏移量是是相对整个页面
3.注意 获取到的left是数值，要加上单位
4.clientX与clientY是用来获取坐标的,用于获取鼠标在当前可见窗口的坐标
所以要理解有滚动条时的计算
图解

下一篇博客我们将介绍事件冒泡，事件委派，大家一起进步呀