JavaScriptはマウスの動きに追従するボックスを実装します

JavaScriptはマウスの動きに追従するボックスを実装します

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

マウスに追従するボックス(境界値の検出を含む)

効果画像:

コード:

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
</head>
<スタイル>
  div {
    位置: 絶対;
    上: 0px;
    左: 0px;
    幅: 100ピクセル;
    高さ: 100px;
    背景色: 赤;
  }
</スタイル>
 
<本文>
  <div>111111111</div>
  <スクリプト>
    タグ名で要素を取得する
    div.onmousedown = 関数(e) {
      e = ウィンドウイベント || e;
      // マウスを押すと、マウスからページの左側までの距離が取得されます。var x = e.clientX;
      // マウスとページの上部の間の距離を取得します。var y = e.clientY;
      // 要素とページの左側の間の距離 var elex = div.offsetLeft;
      // 要素とページの上部の間の距離 var eley = div.offsetTop;
      // マウスと要素間の距離を取得するために減算します var X = x - elex;
      変数 Y = y - エレ;
      コンソールログ(X,Y);
      document.onmousemove = 関数(e) {
          e = ウィンドウイベント || e;
          // マウスの移動中にマウスとページ間の距離を取得します。var movex = e.clientX;
          var movey = e.clientY;
          // 1. 左境界値 // 要素の移動中のページの左側からの距離 var leftx = movex - X;
          var lefty = movey - Y;
          // 1. 左境界値if (leftx <= 0) {
            左x = 0;
          }
          // 2. 上限値if (lefty <= 0) {
            左利き = 0
          }
          // 3. 右境界の値 // ページの表示領域の幅 - 要素の幅 var rightx = document.documentElement.clientWidth - div.offsetWidth;
          (左x >= 右x)の場合{
            左x = 右x
          }
          // 4. 下側の境界値 // ページの表示領域の高さ - 要素の高さ var righty = document.documentElement.clientHeight - div.offsetHeight;
          (左利き >= 右利き)の場合 {
            左利き = 右利き;
          }
          // マウスの移動中にマウスとページ間の距離を取得します - マウスと要素間の距離 = 要素の左上の値 div.style.left = leftx + 'px';
          div.style.top = lefty + 'px';
 
 
 
        }
        //持ち上げるとモバイルイベントがクリアされます document.onmouseup = function() {
          ドキュメント.onmousemove = null;
        }
        // デフォルトイベントを防止します。false を返します。
 
    }
  </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • マウスの動きに追従する画像の効果を実現するために JavaScript を使用する方法
  • マウス移動 div の例を実現する js+html+css
  • マウスで移動するテキストを実現する js メソッド
  • js画像はマウスの動きのコードに従います
  • JavaScript DIVはマウスの動きに追従します
  • jsはマウスの動きに追従する画像の効果を実現します
  • jsはマウスの動きに追従する小さなボールを実現します
  • jsは画像の拡大やマウスの動きに追従する特殊効果を実現します
  • ネイティブ JS で実装されたマウスの動きのアニメーション効果に追従する複数の色のボールの例
  • Javascript マウスが上に移動してスライダーがエフェクトコード共有に従います

<<:  MySQLのパスワードを忘れた場合の対処方法

>>:  Linux で特定の時間にコマンドを実行する方法

推薦する

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

MySQL データベース設計 3 つのパラダイム例分析

3つのパラダイム1NF: フィールドは分離不可能です。 2NF: 主キーがあり、非主キー フィールド...

Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...

WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)

目次1. 上の写真2. ユーザーが存在しない3. コードをアップロードする1. 上の写真 2. ユー...

XHTML 入門チュートリアル: テーブルタグの応用

<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

Vue3における非親子コンポーネント通信の詳細な説明

目次最初の方法アプリ.vueホーム.vueホームコンテンツ.vueデータの応答性レスポンシブプロパテ...

Linux コマンド sort、uniq、tr ツールの詳細な説明

並べ替えツールLinux の sort コマンドは、テキスト ファイルの内容を並べ替えるために使用さ...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

nginxフロー制御とアクセス制御の実装

nginx トラフィック制御レート制限は非常に便利ですが、Nginx では誤解され、誤って設定される...

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...