htnm5 verwendet Javascript, um die Maus über das Symbol zu bewegen

Im Webdesign sind Icons oft ein integraler Bestandteil der Seite. Es ist jedoch zu einer sehr wichtigen Frage geworden, wie diese Symbole lebendiger gestaltet und die Interaktivität und Attraktivität der Seite erhöht werden können. Die Verwendung von JavaScript, um den Effekt zu erzielen, dass die Maus über Symbole fährt, kann genau diesen Bedarf erfüllen und dem Webdesign ein neues visuelles Erlebnis verleihen.

1. Implementierungsprinzip

Wenn wir JavaScript verwenden, um den Effekt zu erzielen, dass die Maus über das Symbol fährt, müssen wir den CSS-Stil ändern, um dies zu erreichen. Konkret müssen wir die Positionseigenschaft des Symbols auf „absolut“ setzen, damit es sich frei innerhalb des Bildcontainers bewegen kann. Als nächstes müssen wir auch die Breite und Höhe des Symbolcontainers und des Symbols selbst festlegen, damit sie eine klare Position haben und auf der Seite angezeigt werden. Wenn sich die Maus dann in den Symbolcontainer bewegt, können wir den Symbolcontainer und den CSS-Stil des Symbols ändern, um den schwebenden Effekt des Symbols zu erzielen und so den dynamischen Effekt und die visuelle Attraktivität der Seite zu verbessern.

2. Implementierungsschritte

Lassen Sie uns nun im Detail vorstellen, wie Sie mithilfe von JavaScript den Effekt schwebender Symbole erzielen, wenn Sie mit der Maus darüber fahren.

1. Zuerst müssen wir ein Bildcontainer-Div in der HTML-Datei und das Symbol img erstellen, das schwebend sein muss.

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

2. Als nächstes müssen wir die CSS-Stile für den Container div und das Symbol img festlegen.

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

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

3. Dann müssen wir JavaScript-Code schreiben, um den schwebenden Effekt des Symbols zu erzielen, indem wir den Symbolcontainer und das Symbolelement abrufen. Der spezifische Code lautet wie folgt:

// 获取图标容器和图标元素
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";
});

Im obigen Code erhalten wir zunächst die Icon-Container-Elemente div und icon img über die Methode getElementById. Anschließend werden die Mausbewegungsereignisse im Symbolcontainer abgehört. Wenn sich die Maus hineinbewegt, verschieben wir das Symbol durch Berechnung einer zufälligen Position an verschiedene Positionen innerhalb des Containers. Wenn die Maus herausbewegt wird, setzen wir das Symbol in die Mitte des Containers zurück.

3. Effektdemonstration

Schließlich werfen wir einen Blick auf den tatsächlichen Anzeigeeffekt der Verwendung von JavaScript, um den Effekt zu erzielen, wenn die Maus über das Symbol schwebt. Hier ist eine einfache Demonstration:

29078658af28745175351e4c5a4d66b5
Sehen Sie sich das Pen Animated Icon mit Vanilla JS von ryuchee (@ryuchee) auf CodePen an.
065276f04003e4622c4fe6b64f465b88

(Hinweis: Bitte unterstützen Sie in Sehen Sie sich den Effekt im Iframe-Browser an)

Sie können sehen, dass sich das Symbol beim Hinein- und Herausbewegen der Maus in den Symbolcontainer zufällig an verschiedene Positionen innerhalb des Containers bewegt, wodurch der Effekt schwebender Symbole erzielt wird. Da der von JavaScript implementierte schwebende Effekt der Maus über dem Symbol den CSS-Stil und die Animationseffekte flexibel an spezifische Designanforderungen anpassen kann, ist sein Anwendungsbereich im Webdesign gleichzeitig sehr breit.

Kurz gesagt kann die Verwendung von JavaScript, um den Effekt zu erzielen, dass die Maus über Symbole schwebt, dem Webdesign lebendige dynamische Funktionen hinzufügen und die Interaktivität und Attraktivität der Seite verbessern.

Das obige ist der detaillierte Inhalt vonhtnm5 verwendet Javascript, um die Maus über das Symbol zu bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!