マウスの尾行効果を実現する JavaScript
|
マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成されたノードにランダムな幅、高さ、色を割り当てて、各効果ノードの外観を異ならせる必要があります。 注: 生成されたノードは、ドキュメント フローの外側に配置され、ページ上の他の要素の位置に影響を与えないように、絶対的に配置する必要があります。 コード例:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>マウス効果</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
体 {
背景色: #9df;
オーバーフロー: 非表示;
高さ：100vh;
}
スパン {
高さ: 30px;
幅: 30ピクセル;
境界線の半径: 50%;
位置: 絶対;
ポインタイベント: なし;
変換: translate(-50%, -50%);
ボックスの影: 10px 10px 30px #45f, -10px -10px 30px #d80;
アニメーション: ボックス 5 秒 線形無限;
zインデックス: 3;
}
@keyframes ボックス {
0% {
変換: translate(-50%, -50%);
不透明度: 1;
フィルター: 色相回転(0度);
}
100% {
変換: translate(-50%, -1000%);
不透明度: 1;
フィルター: 色相回転(720度);
}
}
</スタイル>
</head>
<本文>
</本文>
</html>
<スクリプト>
document.addEventListener("mousemove", 関数(e) {
var 本文 = document.querySelector("本文");
var span = document.createElement("span");
var x = e.offsetX
var y = e.offsetY
span.style.left = x + "px"
span.style.top = y + "px";
コンソールログ(x + ">>>" + y)
var a = Math.random() * 30;
span.style.width = 30 + a + "px";
span.style.height = 30 + a + "px";
body.appendChild(span);
setTimeout(関数() {
span を削除します。
// コンソールログ("ok")
}, 4500)
})
</スクリプト>実行結果:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストアド プロシージャと共通関数のコード分析
>>: Linux Zabbixカスタム監視およびアラーム実装プロセスの分析
推薦する
SELinux 入門
カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...
CentOS7 インストール GUI インターフェースとリモート接続の実装
ブラウザ (Web ドライバー) ベースの Selenium テクノロジを使用してデータをクロールす...
Linux コマンドラインで電卓を使用する 5 つのコマンド
みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...
MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明
1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...
Win10 MySQLでCSVをエクスポートする2つの方法
Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...
Vue3.0 でページング コンポーネントを手動でカプセル化する方法
この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...
IE6では画像要素imgに余分な空白スペースがある
ページの DIV+CSS レイアウトを行う際、IE6 で画像要素 img の下に余分なスペースができ...
vue3+ts+EsLint+Prettier 標準コード実装
目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...
Vue Element UIの使用時に遭遇した問題をまとめる
目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...
CSS で実現される HTML 背景色のグラデーション
エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...
VMware12 に CentOS8 をインストールする方法 (VM 仮想マシンに CentOS8 をインストールするチュートリアル)
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
Vueはリストのシームレスなスクロールを実装します
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
古い Vue プロジェクトに Vite サポートを追加する方法
1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...
きちんとしたHTMLマークアップを使用してページを構築します
インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...
JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明
JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...