如何用JS创建一个简单的光标跟踪球?

我已经创建了一个简单的渐变球。

我想做的是，如果我移动鼠标光标在页面上的任何地方创建球流随着鼠标光标。我已经添加onmousemove事件到JS，但它并没有真正正常工作。

请告诉我代码中的错误。

谢谢!

let cursor=document.querySelector('.ball');
cursor.addEventListener('onmousemove', (e)=>{
let x= e.pageX;
let y= e.pageY;
cursor.style.left= x+'px';
cursor.style.top= y+'px';
});

.ball{
background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);
height: 70px;
width: 70px;
border-radius: 50%;
box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);
transition: 0.1s;
pointer-events: none;
position: fixed;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class="ball"></div>
<script src="script.js"></script>
</body>
</html>

您不需要为此使用eventListener。你可以直接用document.onmousemove

那么下一个问题是你将事件监听器添加到球而不是窗口。

最后一个问题是，当鼠标位置被clientX和clientY调用时，你调用了pageX和pageY

let cursor=document.querySelector('.ball');
document.onmousemove = function(e) {  
let x= e.clientX;
let y= e.clientY;
cursor.style.left= x+'px';
cursor.style.top= y+'px';
};

.ball{
background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);
height: 70px;
width: 70px;
border-radius: 50%;
box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);
transition: 0.1s;
pointer-events: none;
position: fixed;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class="ball"></div>
<script src="script.js"></script>
</body>
</html>

你需要添加事件监听器NOT元素你需要将
移动到页面或者父元素
❌cursor.addEventListener(...)
✅window.addEventListener(...)

在event-listener上你不需要添加后缀"on">
❌onmousemove
✅mousemove

let cursor = document.querySelector('.ball');
window.addEventListener('mousemove', (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});

.ball {
background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 0%, rgba(4, 116, 191, 1) 60%, rgba(0, 212, 255, 1) 97%);
height: 70px;
width: 70px;
border-radius: 50%;
box-shadow: 0px 0px 13px 1px rgba(9, 9, 121, 0.73);
transition: 0.1s;
pointer-events: none;
position: fixed;
}

<div class="ball"></div>

另一个更简单的解决方案可以使用CSScursor属性:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

但为了更好的结果，你需要使用javascript(特别是如果你想移动html元素，因为cursor需要一个图像)

这是一个CSS只知道你想要的。你与嵌入式游标属性使用SVG添加div CSS的使用foreignObject

html {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width:70%;height:70%;margin:15%;border-radius:50%;background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);" ></div></foreignObject></svg>')  40 40, auto;
}

演示:https://codepen.io/t_afif/full/wvmaYex

相关:https://twitter.com/ChallengesCss/status/1536669474140602369

相关内容

最新更新

热门标签：