div跟随鼠标移动

Posted 2020-12-04 caicaihong

1、目标是实现div跟随鼠标而移动，分三种情况进行实现

a）首先获取div，进行绑定鼠标移动事件，给div开启定位功能

第一种实现方式，假如body的大小跟页面大小一样，则可以用这个方法。

1）获取鼠标的坐标，进行给div坐标赋值，实现如下：

var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top +"px";

第二种方式，假如body的高度大于可见高度，则会出现滚动条，clientXY获取的是可见的大小，则多余的部分则无法实现移动，则需要使用下面的方式实现

但是这种方式不兼容IE8，所以如果要兼容IE8，则不能使用。pageX是获取整个页面的大小

var left = event.pageX;
var top = event.pageY;

第三种方式是什么都可以兼容的，涵盖上面两种方式的可行度，就是用可见窗口的加上滚动条的高度即可

var st = document.body.scrollTop || document.documentElement.scrollTop;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top + st+"px";

注，left轴也一样，我这里只是实现了y轴