JSを使用してボールをマウスの動きに追従させる方法
この記事では主に、ネイティブ JS によって実装されたマウスの動きに追従する複数の色のボールのアニメーション効果を紹介します。これには、JavaScript イベント応答、ページ要素属性の動的変更、乱数適用、およびその他の関連操作スキルが含まれます。
この例では、ネイティブ JS で実装されたマウスの動きに追従する複数の色のボールのアニメーション効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。
実装方法:
それぞれの小さなボールの移動には独自の座標があり、小さなボールが移動するとき、座標を転送する必要があります。座標は順番に転送され、ボールが一緒に移動する効果を実現するために最後の座標を与えます
実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球运动</title>
<style type="text/css">
p {
border-radius: 50%;
width: 30px;
height: 30px;
position: absolute;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//创建数组存储所有的小球
var balls = [];
//创建小球函数
function createballs(){
for (var i = 0;i < 60;i++) {
var ball = document.createElement("p");
ball.innerHTML = i + 1;
ball.style.backgroundColor = randomColor();
//将创建的小球存储到数组中
document.body.appendChild( ball);
//将所有的小球存在数组中
balls.push( ball);
}
}
createballs();
//随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//随机颜色
function randomColor() {
return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
}
document.onmousemove = function(e){
var eventObj = e || event;
for(var i = balls.length - 1;i > 0;i--){
//将小球的下标通过for循环进行传递
balls[i].style.left = balls[i - 1].style.left;
balls[i].style.top= balls[i - 1].style.top;
}
//将第一个小球赋值为最新的事件对象中的坐标
balls[0].style.left = eventObj.clientX + "px";
balls[0].style.top= eventObj.clientY + "px";
}
</script>
</html>操作効果:
上記は私がコンパイルしたものです皆様にとって、今後も皆様のお役に立つことを願っております。
関連記事:
ネイティブ JavaScript を使用して虫眼鏡効果を実現する
以上がJSを使用してボールをマウスの動きに追従させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
Win11 でタスクバーのサムネイル プレビューを無効にする方法は? マウスを移動してタスクバー アイコンのサムネイル表示テクニックをオフにする
Feb 29, 2024 pm 03:20 PM
この記事では、Win11システムでタスクバーアイコンをマウスで移動したときに表示されるサムネイル機能をオフにする方法を紹介します。この機能はデフォルトでオンになっており、ユーザーがタスクバー上のアプリケーション アイコンの上にマウス ポインタを置くと、アプリケーションの現在のウィンドウのサムネイルが表示されます。ただし、一部のユーザーは、この機能があまり役に立たない、またはエクスペリエンスに悪影響を与えると感じ、オフにしたい場合があります。タスクバーのサムネイルは楽しい場合もありますが、気が散ったり煩わしい場合もあります。この領域にマウスを移動する頻度を考えると、重要なウィンドウを誤って閉じてしまったことが何度かある可能性があります。もう 1 つの欠点は、より多くのシステム リソースを使用することです。そのため、リソース効率を高める方法を探している場合は、それを無効にする方法を説明します。しかし
appdataフォルダーをDドライブに移動できますか?
Feb 18, 2024 pm 01:20 PM
appdata フォルダーを D ドライブに移動できますか? コンピューターの使用が普及するにつれて、ますます多くのユーザーの個人データやアプリケーションがコンピューターに保存されています。 Windows オペレーティング システムには、ユーザーのアプリケーション データを保存するために使用される appdata フォルダーと呼ばれる特定のフォルダーがあります。多くのユーザーは、データ管理とセキュリティを考慮して、このフォルダーを D ドライブまたは他のディスクに移動できるかどうか疑問に思っています。この記事では、この問題について説明し、いくつかの解決策を提供します。まず、させてください
HP、Professional 1 3モードソフトマウスを発売：4000DPI、Blue Shadow RAW3220、初期価格99元
Apr 01, 2024 am 09:11 AM
3月31日のこのウェブサイトのニュースによると、HPは最近JD.comでProfessor1 3モードBluetoothマウスを発売し、黒と白のミルクティー色があり、初期価格は99元で、保証金10元が必要です。報道によると、このマウスは重さ106グラム、人間工学に基づいたデザインを採用し、寸法127.02x79.59x51.15mm、オプションで7つの4000DPIレベルがあり、Blue Shadow RAW3220センサーを搭載し、650mAhのバッテリーを使用することができるとのことです。 1回の充電で2か月使用可能。このサイトに添付されているマウスパラメータ情報は次のとおりです。
Razer | Pokémon Gengar ワイヤレスマウスとマウスパッドが登場、セット価格は 1,549 元
Jul 19, 2024 am 04:17 AM
7 月 12 日のこのサイトのニュースによると、Razer は本日、Razer|Pokémon Gengar ワイヤレス マウスとマウス パッドの発売を発表しました。単品価格はそれぞれ1,299元、299元、2製品を含むパッケージ価格は1,549元。 Razer が Gengar と提携した周辺機器製品を発売するのはこれが初めてではありません。2023 年に Razer は Gengar スタイルの Yamata Orochi V2 ゲーミング マウスを発売しました。今回発売される2商品は、いずれもゴースト、ゴースト、ゲンガーの姿をイメージした濃い紫色を基調に、その3匹のポケモンとモンスターボールの輪郭がプリントされており、中央にキャラクターのゲンガーが描かれている。古典的なゴーストタイプのポケモンの大きくてカラフルな画像。このサイトでは、Razer|Pokémon Gengar ワイヤレス マウスが、以前にリリースされた Viper V3 Professional Edition に基づいていることがわかりました。全体の重量は 55g で、Razer の第 2 世代 FOC を搭載しています。
VGN との提携ブランド「Elden's Circle」キーボードおよびマウス シリーズ製品が店頭に並びました: Lani / Faded One カスタム テーマ、99 元から
Aug 12, 2024 pm 10:45 PM
8月12日のこのサイトのニュースによると、VGNは8月6日に、Lani/Faded Oneのカスタマイズされたテーマでデザインされたキーボード、マウス、マウスパッドを含む共同ブランドの「Elden Ring」キーボードおよびマウスシリーズを発売しました。の製品はJD.comに掲載されており、価格は99元からです。このサイトに添付されている共同ブランドの新製品情報は次のとおりです。 VGN丨Elden Law Ring S99PRO キーボード このキーボードは、純粋なアルミニウム合金シェルを使用し、5 層サイレンサー構造によって補完され、GASKET 板バネ構造を使用し、単一の- キースロット付き PCB、独自の高さの PBT 素材キーキャップ、アルミニウム合金のパーソナライズされたバックプレーン、VHUB に接続された 3 つのモード接続と SMARTSPEEDX 低遅延テクノロジーをサポートし、549 元から複数のデバイスをワンストップで管理できます。 VGN丨Elden French Ring F1PROMAX ワイヤレスマウス マウス
Microsoft Word ではマウスを使用してテキストを選択または強調表示できません
Feb 20, 2024 am 09:54 AM
この記事では、Microsoft Word でマウスでテキストを選択または強調表示できない場合に発生する可能性のある問題と、その解決方法について説明します。 Microsoft Word でテキストを選択できないのはなぜですか? MSWord でテキストを選択できない場合は、アクセス許可の制限、ドキュメントの保護、マウス ドライバーの問題、ファイルの破損など、さまざまな理由が影響している可能性があります。これらの問題に対する解決策を以下に示します。 Microsoft Word がマウスを使用してテキストを選択または強調表示できない問題を修正する Microsoft Word がマウスを使用してテキストを選択または強調表示できない場合は、以下の解決策に従ってください: マウスの左ボタンが機能していることを確認してください ファイルを変更する資格があるかどうかを確認してください マウスのドライバーを更新してください
Razer マウス ドライバーはどのフォルダーにありますか?
Mar 02, 2024 pm 01:28 PM
多くのユーザーは、Razer ドライバーによってインストールされたファイルがどこに行くのか知りません。これらのドライバー ファイルは、通常、コンピューターの C ドライブであるシステム ディスクにインストールされます。特定の場所は、programfile の RAZE フォルダーにあります。 Razer マウス ドライバーはどのフォルダーにありますか? A: システム C ドライブの Programfiles の下の RAZE フォルダーにあります。通常、ドライバーは C ドライブにインストールされます。場所に応じて見つけてください。 Razer マウスドライバーのインストール方法の紹介 1. 公式 Web サイトからファイルをダウンロードした後、ダウンロードした EXE ファイルをダブルクリックして実行します。 2. ソフトウェアがロードされるまで待ちます。 3. ここで、インストールするドライバーを選択できます。 4. 選択後、右下の「インストール」をクリックします。
6000mAhのシリコンマイナスバッテリー！ Xiaomi 15Proアップグレードが再びリーク
Jul 24, 2024 pm 12:45 PM
7月23日のニュースによると、ブロガーのDigital Chat Stationは、Xiaomi 15 Proのバッテリー容量が6000mAhに増加し、90Wの有線フラッシュ充電をサポートしているというニュースを伝えました。これは、Xiaomiのデジタルシリーズで最大のバッテリーを搭載したProモデルになります。 Digital Chat Stationは以前、Xiaomi 15Proのバッテリーは超高エネルギー密度を持ち、シリコン含有量が競合製品よりもはるかに高いことを明らかにしました。 2023 年にシリコンベースの電池が大規模にテストされた後、第 2 世代のシリコン負極電池が業界の将来の発展方向として特定されており、今年は直接的な競争のピークを迎えます。 1. シリコンの理論グラム容量は 4200mAh/g に達することがあり、これはグラファイトのグラム容量の 10 倍以上です (グラファイトの理論グラム容量は 372mAh/g)。負極の場合、リチウムイオン挿入量が最大に達したときの容量が理論上のグラム容量であり、同じ重量下での容量を意味します。
