マウスの尾行効果を実現する 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カスタム監視およびアラーム実装プロセスの分析
推薦する
詳細なアイデアを備えたシンプルな計算機の HTML 実装
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
MySQL をベースにしたシンプルな検索エンジンを実装する
目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...
MySQLのエンコードの不一致によって発生する可能性のある問題
ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...
MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)
1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...
MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事
目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....
CSS で平均レイアウトを実現するために負のマージンを使用する例
均等に分散されたレイアウトの場合、通常はネガティブ マージン方式を使用します。次の図は平均的なレイア...
よくある HTML タグの記述エラー
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
HTMLはマーキーを使用してテキストを左右にスクロールします
コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...
ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定
Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...
JavaScript における型の必須および暗黙的な変換の詳細な説明
目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...
Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない
デフォルトでは、Flash は常にページのトップレベルに表示されます。つまり、ページに DHTML ...
mysql explain（分析インデックス）の使い方の詳しい説明
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
Linux でショートカットアイコンを設定する方法
序文Linux でショートカットを作成すると、アプリケーションをより速く開くことができます。ここで、...
2015-2016年に主流となるインタラクティブ体験のトレンド
5月の最も重要なインタラクティブデザイン記事！今年、Baiduのデザイナーは体験の観点から出発し、大...
JavaScript ベースのシンプルな計算機の実装
この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...