マウスで画像を動かすJavaScript

マウスで画像を動かすJavaScript

この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装のアイデア

1. ドキュメントにmousemoveイベントをバインドし、マウスの座標を取得します: e.pageX、e.pageY
2. 画像を絶対位置に設定します: position: absolute;
3. 画像要素オブジェクトを取得し、マウスのx座標とy座標をそれぞれ画像の左と上の値に割り当てます。マウスを画像の中央に配置するには、画像の幅と高さの半分を減算して、画像を上と左に配置します。注：単位「px」を追加することを忘れないでください。

ヒント:

e.clientX - ブラウザウィンドウの表示領域を基準としたマウスのX軸座標を取得します。
e.clientY - - - ブラウザウィンドウの表示領域を基準としたマウスのY軸座標を取得します。
e.pageX - ドキュメントページを基準としたマウスのX軸座標を取得します。
e.pageY - ドキュメントページに対するマウスのY座標を取得します。
e.screenX - コンピュータ画面を基準としたマウスのX軸座標を取得します。
e.screenY - コンピュータ画面に対するマウスのY座標を取得します。

例

コード例:

<!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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • マウスの動きに追従する画像の効果を実現するために JavaScript を使用する方法
  • マウスで移動するテキストを実現する js メソッド
  • js画像はマウスの動きのコードに従います
  • JavaScript DIVはマウスの動きに追従します
  • マウスの動きに合わせて泡のアニメーション効果を実現するには、JS を使用します。
  • JavaScript を使用して、マウスをホバーするとマウスに追従する矢印付きのポップアップ情報レイヤーを実装する
  • jsはマウスの動きに追従する画像の効果を実現します
  • JavaScriptはマウスのx座標とy座標に従ってテキスト効果を移動します
  • jsはマウスの動きに追従する小さなボールを実現します
  • jsは画像の拡大やマウスの動きに追従する特殊効果を実現します

<<:  Centos は chrony 時間同期サーバー プロセス図を構築します

>>:  プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

推薦する

JSはオンラインでのアナウンスのスクロール効果を実現します

この記事では、オンラインアナウンスのスクロール効果を実現するためのJSの具体的なコードを参考までに共...

Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)

1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

Linux CentOS 6.5 のアンインストール、tar、および MySQL のインストールチュートリアル

システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...

MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ：オペレーティング シ...

ウェブページのフラッシュアニメーションが表示されない問題の解決策

<br />解決手順は次のとおりです。スタート -> 実行 -> reged...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

Dockerイメージのサイズを縮小する6つの方法

2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド（１）コピー操作（２）貼り付け操作（...

CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文：暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

MySQL の pid とソケットの詳細な説明

目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...