マウスの尾行効果を実現する 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カスタム監視およびアラーム実装プロセスの分析
推薦する
reduxの動作原理と使い方の説明
目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は？ （1）redu...
CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。
数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...
CSS3は、Transformを使用して動く2D時計を作成します。
これでtransformコースは終了です。例を見てみましょう。transform transform...
js タグ構文の使用法の詳細
目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文：日常の開発では、プログラム...
VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法
序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...
Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介
前提条件: Dockerはすでにインストールされています1. 画像を見つける（方法は2つあります） ...
MySQL ルートパスワードエラー番号 1045 の解決方法
MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...
CentOS 7.x に ZSH ターミナルをインストールする方法
1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...
Linuxでスクリーンショットを撮って編集するための最高のツール
メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...
Bash スクリプトを使用して Linux のメモリ使用量を監視する方法
序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...
CentOS7にNginxを素早くインストールする方法を教えます
目次1. 概要2. Nginxインストールパッケージをダウンロードする3. 依存パッケージをインスト...
ネイティブJSを使用した遅延読み込みlazyLoadの3つの方法の概要
目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...
知っておくべき 7 つのネイティブ JS エラーの種類
目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...
Nginx ロードバランシングとは何か、そしてそれをどのように設定するか
負荷分散とは負荷分散は主に、専用のハードウェア デバイスまたはソフトウェア アルゴリズムによって実現...
Vueページの画像が表示されない問題の解決方法
新しいバージョンの設定インターフェースを作る際に、vueフレームワークを使用して実装しました。ページ...