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 mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

Linux gzipコマンドの使用

1. コマンドの紹介gzip (GNU zip) コマンドは、ファイルの圧縮と解凍に使用されます。こ...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

JS 1次元配列を3次元配列に変換する例

今日、CSDN の Q&A セクションで友人が質問をしているのを見ました。彼は 1 次元配列...

JavaScriptは両端キューを実装する

この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...

Docker での環境変数の使用とよくある問題の解決策

序文Docker はコンテナの環境変数を設定できます。設定方法は 2 つあります。イメージを作成する...

JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...

MySQL 上級学習ノート (パート 3): MySQL 論理アーキテクチャの紹介、MySQL ストレージ エンジンの詳細な説明

MySQL 論理アーキテクチャの概要他のデータベースと比較すると、MySQL は、そのアーキテクチャ...

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...