htnm5 uses javascript to float the mouse over the icon

In web design, icons are often an integral part of the page. However, how to make these icons more vivid and enhance the interactivity and attractiveness of the page has become a very important issue. The use of JavaScript to achieve the effect of the mouse passing over icons can exactly meet this demand and bring a new visual experience to web design.

1. Implementation Principle

When using JavaScript to achieve the effect of the mouse passing over the icon, we need to modify the CSS style to achieve it. Specifically, we need to set the icon's position property to "absolute" so that it can move freely within the image container. Next, we also need to set the width and height of the icon container and the icon itself so that they have a clear position and display on the page. Then, when the mouse moves into the icon container, we can modify the icon container and the CSS style of the icon to achieve the floating effect of the icon, thereby enhancing the dynamic effect and visual appeal of the page.

2. Implementation steps

Now, let us introduce in detail how to achieve the effect of the mouse passing through the icon floating through JavaScript.

1. First, we need to create an image container div in the HTML file, and the icon img that needs to be floated.

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

2. Next, we need to set CSS styles for the container div and icon img.

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

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

3. Then, we need to write JavaScript code to achieve the floating effect of the icon by obtaining the icon container and icon element. The specific code is as follows:

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

In the above code, we first obtain the icon container div and icon img elements through the getElementById method. Then, we listen to the mouse move-in and move-out events on the icon container. When the mouse moves in, we move the icon to different positions within the container by calculating a random position. When the mouse is moved out, we reset the icon to the center of the container.

3. Effect Demonstration

Finally, let’s take a look at the actual display effect of using JavaScript to achieve the effect of floating the mouse over the icon. The following is a simple demonstration effect:

fe421cc560eaa552d4a06a670528e5ab
See the Pen Animated Icon with Vanilla JS by ryuchee (@ryuchee) on CodePen.
065276f04003e4622c4fe6b64f465b88

(Note: Please check the effect in a browser that supports iframe)

You can see that as the mouse moves in and out of the icon container, the icon will be random Move it to different positions within the container to achieve the effect of the icon floating. At the same time, because the floating effect of the mouse over the icon implemented by JavaScript can flexibly adjust its CSS style and animation effects according to specific design needs, its application range in web design is very wide.

In short, realizing the effect of mouse floating over icons through JavaScript can add vivid dynamic features to web design and improve the interactivity and attractiveness of the page.

The above is the detailed content of htnm5 uses javascript to float the mouse over the icon. For more information, please follow other related articles on the PHP Chinese website!