Javascript 如何让div跟随鼠标？

下面是我想要实现的目标的链接： 将鼠标悬停在平面上时，框会跟随鼠标。我正试图重现同样的东西

这是我到目前为止所做的，这是一个小演示，我知道它与实际网站上的外观并不接近：

html:

js:

var mouseX=0，mouseY=0，limitX=150-15，limitY=150-15；
$（'.container'）.mousemove（函数（e）{
$（“#follow”）.show（）；
var offset=$（'.container'）.offset（）；
控制台日志（e）；
mouseX=Math.min（e.pageX-offset.left，limitX）；
mouseY=Math.min（e.pageY-offset.top，limitY）；
如果（mouseX<0）mouseX=0；
如果（mouseY<0）mouseY=0；
});
$（'.container'）.mouseleave（函数（）{
$（“#follow”）.hide（）；
});    
var follow=$（“#follow”）；
var xp=0，yp=0；
var loop=setInterval（函数（）{
xp+=（mouseX-xp）/5；
yp+=（鼠标-yp）/5；
css（{left:xp，top:yp}）；
}, 30);

请有人给我指引正确的方向

---

提前谢谢你

首先您应该设置DIV

高度：100%像Semplice一样。

在设置鼠标在元素中心的位置之后，您应该计算DIV width，并将其作为左边距的一半

var halfwidth = ($("#follow"))/2;
$("#follow").css('margin-left',halfwidth);

我希望我的观点是正确的：）
示例页面中没有垂直移动，首先你应该将代码中的所有内容都垂直删除。看这把小提琴：这实际上与我的想法非常接近！但我遇到的问题是，如果我将宽度设置为100%，那么它是响应性的，那么我如何设置悬停以穿过整个宽度？我知道这和js中的“limitX=150-15”有关。我只是不知道如何添加实际“container”类的宽度。以下是我试图做的：
#follow{
position : relative;
background-color : grey;
width:75px;
height:150px;
}

.centerdiv {
width:150px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.container
{
width:150px;
height:150px;   
position:absolute;
top:0;
left:0;
overflow:hidden;
border:1px solid #000000;
}

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container').mousemove(function(e){
$("#follow").show();
var offset = $('.container').offset();
console.log(e);
mouseX = Math.min(e.pageX - offset.left, limitX);
mouseY = Math.min(e.pageY - offset.top, limitY);
if (mouseX < 0) mouseX = 0;
if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
$("#follow").hide(); 
});    


var follow = $("#follow");
var xp = 0, yp = 0;
var loop = setInterval(function(){
xp += (mouseX - xp) / 5;
yp += (mouseY - yp) / 5;
follow.css({left:xp, top:yp});

}, 30);

var halfwidth = ($("#follow"))/2;
$("#follow").css('margin-left',halfwidth);