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

以下もご興味があるかもしれません: