如何在 JavaScript 中使用鼠标事件显示图像翻转?

本教程将教我们如何使用 JavaScript 中的鼠标事件显示图像翻转。图像翻转的含义是当用户将鼠标悬停在图像上时更改图像样式或整个图像。

为了构建有吸引力的用户界面，开发人员经常向网站和应用程序添加图像翻转功能。在这里，我们将看到以不同的方式应用图像翻转。

在鼠标悬停时更改图像的样式

在此方法中，要创建图像翻转，我们将使用 JavaScript 的onmouseover和onmouseout事件。当用户将鼠标指针放在图像上时，图像的样式会发生变化，而当用户将鼠标指针从图像上移开时，图像将应用默认样式。

语法

用户可以按照以下语法在鼠标悬停时更改图像的样式。

• 使用 JavaScript onmouseover 和 onmouseout 事件

object.onmouseover = function(){myScript};
object.onmouseout = function(){myScript};

• 使用 addEventListener() 方法

object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);

算法

步骤 1 − 通过 id 访问图像元素。

let deomImage = document.getElementById("demo");

步骤 2 − 将 onmouseover 事件分配给图像元素 deomImage。

deomImage.onmouseover = function() {
   document.demo.style = "height:200px;width:200px";
});

步骤 3 −将 onmouseout 事件分配给图像元素 deomImage。

deomImage.onmouseout = function() {
   document.demo.style = "height:100px;width:100px;"
});

事件

• onmouseover − 每当用户将鼠标悬停在图像元素上时，都会调用该事件。

• onmouseout −当用户将鼠标指针移到图像之外时，将触发此事件。

示例

使用 JavaScript onmouseover 和 onmouseout 事件

在下面的示例中，我们创建了图像元素，并为图像指定了默认宽度和高度。我们已将 “onmouseover” 事件添加到图像元素，以便在用户将鼠标悬停在图像上时应用不同的样式。此外，当用户将光标指针移到图像元素之外时，我们已应用 “onmouseout” 事件以应用默认样式。

<!DOCTYPE html>
<html>
<body>
   <h2> Image rollover with mouse event. </h2>
   <h4> Rollover on the below image to change the styles of the image. </h4>
   <img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
   <script>
      let deomImage = document.getElementById("demo");
      deomImage.onmouseover = function() {deomImage.style = "height:200px; width:200px";};
      deomImage.onmouseout = function() {deomImage.style = "height:100px; width:100px";};
   </script>
</body>
</html>

当您将鼠标悬停在图像上时，图像的尺寸会增加，而当用户将鼠标指针移到图像之外时，图像的尺寸会减小。

示例

使用 addEventListener() 方法

以下示例演示如何使用 addEventListener() 方法显示图像滚动。此示例显示的效果与上例相同。

<html>
<head>
   <title> Show image rollover with mouse event. </title>
</head>
<body>
   <h2> Showing image rollover with mouse event. </h2>
   <h4> Rollover on the below image to change the styles of the image. </h4>
   <img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
   <script>
      let deomImage = document.getElementById("demo");
      deomImage.addEventListener( "mouseover", function () {
         document.demo.style = "height:200px; width:200px";
      });
      deomImage.addEventListener( "mouseout", function () {
         document.demo.style = "height:100px; width:100px;"
      })
   </script>
</body>
</html>

在上面的输出中，用户可以看到，当他们将鼠标悬停在图像上时，图像的尺寸会增加，而当用户将鼠标指针移到图像之外时，图像的尺寸会减小。

鼠标悬停时更改图像

在上面的方法中，我们刚刚在用户将鼠标悬停在图像上时更改了图像样式。在本节中，我们将学习如何在用户将鼠标指针移动到图像上时更改图像，并且它将在用户将鼠标指针移到图像之外时设置默认图像。

算法

• 步骤 1 − 通过 id 访问图像。

• 步骤 2 − 使用 addEventListener() 方法附加一个"mouseover"事件附加到图像元素。

• 步骤 3 − 使用 addEventListener() 方法将"mouseout"事件附加到图像元素。

示例

在下面的示例中，我们将更改图像的"src"属性的值以替换鼠标悬停时的图像。我们已经使用了上述 mouseover 和 mouseout 事件来实现我们的目标。

<html>
<head>
   <title> Show image rollover with mouse event . </title>
</head>
<body>
   <h2> Show image rollover with mouse event. </h2>
   <h4> Rollover on the below image to change the image. </h4>
   <img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
   <script>
      let deomImage = document.getElementById("demo");
      deomImage.addEventListener( "mouseover", function () {
         document.demo.src = "https://www.tutorialspoint.com/static/images/logo-footer-b.png";
      });
      deomImage.addEventListener( "mouseout", function () {
         document.demo.src = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
      });
   </script>
</body>
</html>

在上面的输出中，当用户将鼠标悬停在图像上时，图像将会改变。

在多幅图像上应用滚动事件

在本节中，我们将创建一个具有两个参数的自定义函数。一个是图像 ID，另一个是图像源，我们希望在事件触发时将其替换为当前图像源。当 mouseover 和 mouseout 事件触发时，我们将通过传递图像 ID 和新图像源 URL 作为参数来调用函数。

示例

通过这种方式，用户可以通过编写更少的代码行将图像滚动应用于多幅图像。

<html>
<head>
   <title> Show image rollover with mouse events. </title>
</head>
<body>
   <h2> Show image rollover with mouse event. </h2>
   <h4> Rollover on any image change the default image. </h4>
   <img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
   OnMouseOver="mouseRollover('demo1','https://www.tutorialspoint.com/static/images/logo-footer-b.png')"
   OnMouseOut="mouseRollover('demo1','https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg')"
   style="height:100px;width:100px;" id="demo1" alt="demo Image">
   <img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
   OnMouseOver = "mouseRollover('demo2','https://www.tutorialspoint.com/static/images/logo-footer-b.png')"
   OnMouseOut = "mouseRollover('demo2','https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg')"
   style="height:100px; width:100px;" id="demo2" alt="demo Image">
   <script>
      function mouseRollover( imageId, imageSrc ) {
         let image = document.getElementById( imageId );
         image.src = imageSrc;
      }
   </script>
</body>
</html>

结论

在本教程中，我们了解了使用鼠标事件实现图像滚动的不同方法。第一种方法是基本方法，我们只更改了图像的样式。第二种方法仅用于我们需要在单个图像上应用鼠标滚动时。当用户需要在多个图像上应用鼠标滚动时，建议使用第三种方法。

相关文章

• Firefox 中的 HTML5 输入类型"number"
• 在 HTML 中创建带矩阵的 JS 径向渐变
• 如何在页面加载 HTML 时将光标(自动对焦)放置在文本框中?
• 如何使用 JavaScript DOM 在一个声明中设置所有背景属性?
• 如何使用 JavaScript 搜索并显示区域的 href 属性的路径名部分?
• 如何在 JavaScript 中搜索图像地图区域的替代文本?
• 如何在 JavaScript 中搜索链接的 type 属性值?
• 如何在 JavaScript 中搜索链接的 target 属性值?
• JavaScript 中 parseFloat() 方法的作用是什么?
• JavaScript 中 some() 方法的用法是什么?

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/