マウスの尾行効果を実現する 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カスタム監視およびアラーム実装プロセスの分析
推薦する
tomcatでcatalina.outログをカットする3つの方法の詳細な説明
1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...
JavaScript配列重複排除の詳細な説明
目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...
MySQLを安全にシャットダウンする方法
MySQL サーバーをシャットダウンする場合、シャットダウン方法に応じてさまざまな問題が発生する可能...
html2canvas を使用して、Baidu マップを含む Dom 要素を画像に処理するソリューション
問題 1: Baidu Map はタイル画像 (地図が写真で構成されている) を使用しています。ht...
MySQLはデータベースのN+1クエリ問題を解決します
導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...
JavaScript setinterval 1秒遅延ソリューション
setinterval を使用すると、ページを開いた直後に 1 秒の遅延後に実行されることがわかりま...
アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
mysql binlog (バイナリログ) を表示する方法
たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...
Linux の chown コマンドと chmod コマンドの違いの詳細な説明
Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...
MySQL 結合テーブルクエリの基本操作 左結合のよくある落とし穴
概要中小規模のプロジェクトでは、特にレポートを作成するときに、結合テーブル クエリが非常に一般的な操...
JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)
導入：スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...
CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...
Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします
v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...
vue3 のさまざまな構文形式を比較したサンプルコード
デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...
要素の読み込み効果を実現するための純粋なHTML+CSS
これは Element UI の読み込みコンポーネントのエフェクトです。かっこいいですね。実装してみ...