如何用JS創建一個簡單的Cursor跟蹤球？-有解無憂

我創建了一個簡單的漸變球。

我想要做的是，如果我將滑鼠游標移動到頁面上的任何位置，創建的球流與滑鼠游標一起移動。我已將 onm ousemove 事件添加到 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>

uj5u.com熱心網友回復：

為此，您不需要 eventListener。你可以使用document.onmousemove.

然后下一個問題是您將事件偵聽器添加到球而不是視窗。

最后一個問題是，你起訴了pageX，pageY而滑鼠位置是用clientXand呼叫的clientY

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>

uj5u.com熱心網友回復：

您需要添加事件監聽器而不是您需要移動的元素
，而是添加到頁面或父元素
??cursor.addEventListener(...)
window.addEventListener(...)

onevent-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需要圖片）

uj5u.com熱心網友回復：

如果您愿意，這是一個 CSS 唯一的想法。您將 cursor 屬性與嵌入式 SVG 一起使用，您可以在其中使用 div 添加 div 及其 CSSforeignObject

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/497763.html

標籤：javascript html css

上一篇：如何在不知道陣列名稱的情況下獲取陣列的值

下一篇：如何在物件陣列中求和javascript陣列的屬性的總和？