我正在使用一个小脚本来跟随光标移动
元素。
这个脚本使元素严格跟随光标。
我想要做的是在“跟随”光标的过程中添加一些持续时间。我尝试了CSS过渡,但动画总是会出现问题。有人能帮我解决这个问题吗?
假设鼠标在某个位置,然后它的位置改变了大约100px。我想指定持续时间,就像我使用CSS一样...但问题是我不能使用任何过渡效果,只能使用一些JavaScript魔法...
I was wondering how to add a transition without using the CSS but I'm not the most advanced when it comes to JavaScript. [编辑]:我不想使用
[编辑2]:我想使用
假设鼠标在某个位置,然后它的位置改变了大约100px。我想指定持续时间,就像我使用CSS一样...但问题是我不能使用任何过渡效果,只能使用一些JavaScript魔法...
document.body.addEventListener("mousemove", function(e) {
var curX = e.clientX;
var curY = e.clientY;
document.querySelector('mouse').style.left = curX - 10 + 'px';
document.querySelector('mouse').style.top = curY - 10 + 'px';
});
body {
background: #333;
height: 500px;
width: 500px;
}
mouse {
display: block;
position: fixed;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
}
<body>
<mouse></mouse>
</body>
I was wondering how to add a transition without using the CSS but I'm not the most advanced when it comes to JavaScript. [编辑]:我不想使用
window.setTimeout
。[编辑2]:我想使用
transition: 0.1s;
,但正如我所说,当用户移动鼠标太快时,它会破坏效果。
setTimeout
,那么您如何想象进行动画呢? - trincot