htnm5 は JavaScript を使用してアイコン上でマウスをフロートさせます。

Web デザインでは、アイコンはページの不可欠な部分であることがよくあります。しかし、これらのアイコンをいかに鮮やかにし、ページのインタラクティブ性や魅力を高めるかが非常に重要な課題となっています。 JavaScript を使用してアイコン上をマウスが通過する効果を実現すると、この需要を正確に満たし、Web デザインに新しい視覚体験をもたらすことができます。

1. 実装原則

JavaScript を使用してマウスがアイコン上を通過する効果を実現する場合、それを実現するために CSS スタイルを変更する必要があります。具体的には、アイコンがイメージ コンテナー内で自由に移動できるように、アイコンの位置プロパティを「絶対」に設定する必要があります。次に、アイコン コンテナとアイコン自体の幅と高さを設定して、ページ上で明確な位置と表示ができるようにする必要があります。次に、マウスがアイコン コンテナ内に移動すると、アイコン コンテナとアイコンの CSS スタイルを変更してアイコンのフローティング効果を実現し、それによってページの動的な効果と視覚的な魅力を高めることができます。

2. 実装手順

次に、JavaScript で浮遊するアイコンをマウスが通過する効果を実現する方法を詳しく紹介します。

1. まず、HTML ファイル内にイメージ コンテナ div と、フローティングする必要があるアイコン img を作成する必要があります。

<div id="icon-container">
  <img id="icon" src="icon.png">
</div>

2. 次に、コンテナ div とアイコン img の CSS スタイルを設定する必要があります。

#icon-container {
  position: relative;
  width: 100px;
  height: 100px;
}

#icon {
  position: absolute;
  width: 50px;
  height: 50px;
}

3. 次に、アイコン コンテナとアイコン要素を取得して、アイコンのフローティング効果を実現する JavaScript コードを記述する必要があります。具体的なコードは次のとおりです。

// 获取图标容器和图标元素
var iconContainer = document.getElementById("icon-container");
var icon = document.getElementById("icon");

// 监听鼠标移入图标容器的事件
iconContainer.addEventListener("mouseover", function() {
  // 计算图标的随机位置
  var left = Math.floor(Math.random() * (iconContainer.offsetWidth - icon.offsetWidth));
  var top = Math.floor(Math.random() * (iconContainer.offsetHeight - icon.offsetHeight));

  // 修改图标容器和图标的CSS样式，实现图标浮动的效果
  icon.style.left = left + "px";
  icon.style.top = top + "px";
});

// 监听鼠标移出图标容器的事件
iconContainer.addEventListener("mouseout", function() {
  // 将图标重置到容器的中央位置
  icon.style.left = (iconContainer.offsetWidth - icon.offsetWidth) / 2 + "px";
  icon.style.top = (iconContainer.offsetHeight - icon.offsetHeight) / 2 + "px";
});

上記のコードでは、まず getElementById メソッドを通じてアイコン コンテナーの div 要素とアイコン img 要素を取得します。次に、アイコン コンテナ上のマウスの移動イベントと移動イベントをリッスンし、マウスが移動すると、ランダムな位置を計算してアイコンをコンテナ内の別の位置に移動します。マウスを移動すると、アイコンがコンテナの中央にリセットされます。

3. 効果のデモ

最後に、JavaScript を使用してアイコン上でマウスをフローティングする効果を実現する実際の表示効果を見てみましょう。以下は簡単なデモンストレーション効果です:

f6cb48381c76b4f13698f6074af8a089
CodePen## で、 Ryuchee (@ Ryuchee) による Vanilla JS を使用したペン アニメーション アイコンを参照してください。 #. 065276f04003e4622c4fe6b64f465b88
(注: iframe をサポートするブラウザで効果を確認してください)

マウスをアイコンの内外に移動すると、それが確認できます。コンテナの場合、アイコンはランダムになります。コンテナ内の別の位置に移動して、アイコンが浮いている効果を実現します。同時に、JavaScript によって実装されたアイコン上でのマウスのフローティング効果は、特定のデザインのニーズに応じて CSS スタイルやアニメーション効果を柔軟に調整できるため、Web デザインにおける応用範囲は非常に広いです。

つまり、JavaScript を使用してアイコン上でマウスをフローティングする効果を実現すると、Web デザインに鮮やかな動的な機能を追加し、ページのインタラクティブ性と魅力を向上させることができます。

以上がhtnm5 は JavaScript を使用してアイコン上でマウスをフロートさせます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。