Javascript 修改光标'；滞后'；

我目前正在为我的投资组合网站构建一个修改过的游标。不幸的是，当我尝试滚动和移动光标时，光标会滞后。但是，当我从HTML、CSS和JavaScript中删除所有其他元素，并且只有关于游标（）的代码时，它就可以工作了

//光标已修改
var cursor=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，函数（e）{
e、 停止传播（）；
var x=e.clientX；
变量y=e.clientY；
cursor.style.left=x+'px'；
cursor.style.top=y+'px'；
});
//光标悬停已修改-悬停图元时
var cursor=document.getElementById（'cursor'）；
var clickableCursor=document.getElementsByClassName（'clickableCursor'）；
对于（变量i=0；i{
cursor.style.height=“80px”；
cursor.style.width=“80px”；
cursor.style.animation=“cursorAnimation 5s linear infinite”；
cursor.style.background=“白色”；
});
clickableCursor[i]。addEventListener（'mouseout'，（）=>{
cursor.style.height=“40px”；
cursor.style.width=“40px”；
cursor.style.animation=“无”；
cursor.style.border=“2px纯白”；
cursor.style.background=“无”；
});
}

正文{
光标：无；
}
.集装箱{
高度：3000px；
宽度：100%；
位置：相对位置；
背景：橙色；
}
#光标{
背面可见性：隐藏；
z指数：100000000；
位置：固定；
宽度：40px；
高度：40px；
边框：2倍纯白；
转换：.1s；
边界半径：50%；
指针事件：无；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡时间：100ms；
过渡定时功能：缓解；
}
#游标：：之前{
内容：''；
位置：绝对位置；
高度：7px；
宽度：7px；
边界半径：100%；
背景色：白色；
}
.可点击光标{
字体大小：50px；
颜色：白色；
位置：固定；
背景：黑色；
填充：50px
}
.一{
顶部：50px；
左：50px；
}
.二{
顶部：50px；
右：50px；
}

您好

之所以会出现滞后，是因为您正在使用转换将光标移动到当前鼠标位置，并明确指出它应该滞后100毫秒

您应该只在要设置动画的元素和属性上应用CSS转换，而不是光标的位置

---

使用

转换属性

规则定义应“转换”的属性，或使用转换速记语法明确指定属性名称，就像@Tyler Roper在其注释中所做的那样。

出现延迟是因为您使用转换将光标移动到当前鼠标位置，明确说明应滞后于100ms

您应该只在要设置动画的元素和属性上应用CSS转换，而不是光标的位置

---

使用

转换属性

规则定义哪些属性应“转换”，或者使用转换速记语法明确指定属性名称，就像@Tyler Roper在其注释中所做的那样。

我遇到了同样的问题，我用此代码解决了这个问题： （希望能对您或其他开发者有所帮助）

$（窗口）.ready（函数（）{
设mouseX=0；
设mouseY=0；
设xp=0；
设yp=0；
$（文档）.mousemove（函数（e）{
$（“.custom\uuuu cursor\uuuu internal”）.css({
转换：'translate（+（e.clientX-3.25）+'px，++（e.clientY-3.25）+'px）'
});
mouseX=e.clientX-10；
mouseY=e.clientY-10；
});
setInterval（函数（）{
xp+=（（mouseX-xp）/6）；
yp+=（（鼠标-yp）/6）；
$（“.custom_uuuucursor_uuuouter”）.css（{transform:'translateX（+（xp-15）+'px）translateY（+（yp-15）+'px）}）；
}, 10);
})

*{
光标：无；
}
.自定义\光标\内部{
高度：7.5px；
宽度：7.5px；
位置：固定；
转换：转换（0px，0px）；
背景色：#F7D883；
边界半径：50%；
转换：高度.3s立方贝塞尔（0.46,0.03,0.52,0.96），宽度.3s立方贝塞尔（0.46,0.03,0.52,0.96）；
z指数：5000；
指针事件：无；
}
.自定义光标外部{
高度：50px；
宽度：50px；
边界半径：50%；
边框：1px实心#0F1928；
背景色：透明；
位置：固定；
z指数：5000；
转换：转换（0px，0px）；
指针事件：无；
不透明度：0.4；
}

---

我遇到了同样的问题，我用以下代码解决了它： （希望能对您或其他开发者有所帮助）

$（窗口）.ready（函数（）{
设mouseX=0；
设mouseY=0；
设xp=0；
设yp=0；
$（文档）.mousemove（函数（e）{
$（“.custom\uuuu cursor\uuuu internal”）.css({
转换：'translate（+（e.clientX-3.25）+'px，++（e.clientY-3.25）+'px）'
});
mouseX=e.clientX-10；
mouseY=e.clientY-10；
});
setInterval（函数（）{
xp+=（（mouseX-xp）/6）；
yp+=（（鼠标-yp）/6）；
$（“.custom_uuuucursor_uuuouter”）.css（{transform:'translateX（+（xp-15）+'px）translateY（+（yp-15）+'px）}）；
}, 10);
})

*{
光标：无；
}
.自定义\光标\内部{
高度：7.5px；
宽度：7.5px；
位置：固定；
转换：转换（0px，0px）；
背景色：#F7D883；
边界半径：50%；
转换：高度.3s立方贝塞尔（0.46,0.03,0.52,0.96），宽度.3s立方贝塞尔（0.46,0.03,0.52,0.96）；
z指数：5000；
指针事件：无；
}
.自定义光标外部{
高度：50px；
宽度：50px；
边界半径：50%；
边框：1px实心#0F1928；
背景色：透明；
位置：固定；
z指数：5000；
转换：转换（0px，0px）；
指针事件：无；
不透明度：0.4；
}