この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 実装のアイデア1. ドキュメントにmousemoveイベントをバインドし、マウスの座標を取得します: e.pageX、e.pageY ヒント: e.clientX - ブラウザウィンドウの表示領域を基準としたマウスのX軸座標を取得します。 例コード例: <!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> <スタイル> 画像 { /* 幅: 80px; 高さ: 90px; */ 位置: 絶対; } </スタイル> </head> <本文> <img src="images/斑.png" alt=""> <スクリプト> var img = document.querySelector('img'); document.addEventListener('mousemove', 関数(e) { var x = e.pageX; var y = e.pageY; img.style.top = y - 40 + 'px'; img.style.left = x - 48 + 'px'; }) </スクリプト> </本文> </html> ページ効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos は chrony 時間同期サーバー プロセス図を構築します
>>: プロフェッショナルなMySQL開発設計仕様とSQL記述仕様
この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...
1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...
この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...
システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...
MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...
<br />解決手順は次のとおりです。スタート -> 実行 -> reged...
1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...
実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...
目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...
2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...
序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...
目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...
日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...
目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...