JavaScript 实现图片鼠标悬停放大缩小效果教程-js教程-PHP中文网

JavaScript 实现图片鼠标悬停放大缩小效果教程

霞舞

发布： 2025-10-08 11:49:01

原创

922人浏览过

javascript 实现图片鼠标悬停放大缩小效果教程

本文将指导你如何使用 JavaScript 实现一个简单的图片鼠标悬停放大缩小效果。我们将通过修改图片宽度的方式来实现这一效果，并提供完整的 HTML 和 JavaScript 代码示例，以及详细的解释和注意事项，帮助你理解并应用到自己的项目中。通过本教程，你将掌握使用 JavaScript 控制 CSS 样式的基本方法。

实现原理

实现图片放大缩小效果的核心在于：

监听鼠标事件： 使用 onmouseover 和 onmouseout 事件分别在鼠标悬停和移开时触发相应的 JavaScript 函数。
定时器： 使用 setInterval 函数周期性地改变图片的宽度，从而实现动画效果。
CSS 样式控制： 使用 JavaScript 动态修改图片的 style.width 属性。

代码实现

以下是一个完整的代码示例，展示了如何实现图片鼠标悬停放大缩小效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大缩小</title>
</head>
<body>
    <img onmouseover="increasesz()" onmouseout="decreasesz()" src="https://picsum.photos/200" width="1000px" id="img1">

    <script>
        var width = 1000; // 初始宽度
        var Id = 0; // 定时器ID
        var a = 2; // 每次改变的像素值

        function increasesz() {
            Id = setInterval(expand, 20); // 每 20 毫秒执行一次 expand 函数
        }

        function expand() {
            if (width < 1200) {
                width = width + a;
                document.getElementById("img1").style.width = width + "px"; // 关键：添加 "px" 单位
            } else {
                clearInterval(Id); // 停止定时器
            }
        }

        function decreasesz() {
            Id = setInterval(shrink, 20); // 每 20 毫秒执行一次 shrink 函数
        }

        function shrink() {
            if (width > 1000) {
                width = width - a;
                document.getElementById("img1").style.width = width + "px"; // 关键：添加 "px" 单位
            } else {
                clearInterval(Id); // 停止定时器
            }
        }
    </script>
</body>
</html>

登录后复制

代码解释

HTML 结构：

小爱开放平台
小米旗下小爱开放平台

23

查看详情

立即学习“Java免费学习笔记（深入）”；
- <img> 标签用于显示图片。
- onmouseover 属性指定鼠标悬停时执行 increasesz() 函数。
- onmouseout 属性指定鼠标移开时执行 decreasesz() 函数。
- src 属性指定图片 URL。这里使用了一个占位图片，你可以替换成自己的图片。
- width 属性设置图片的初始宽度。
- id 属性用于通过 JavaScript 获取图片元素。
JavaScript 代码：
- width 变量存储图片的当前宽度。
- Id 变量存储定时器的 ID，用于停止定时器。
- a 变量定义每次改变的像素值，控制放大缩小的速度。
- increasesz() 函数：
  - 使用 setInterval(expand, 20) 启动一个定时器，每 20 毫秒执行一次 expand() 函数。
- expand() 函数：
  - 检查当前宽度是否小于最大宽度 (1200px)。
  - 如果小于最大宽度，则增加宽度，并更新图片的 style.width 属性。 注意：需要将 width 变量转换为字符串，并添加 "px" 单位。
  - 如果达到最大宽度，则使用 clearInterval(Id) 停止定时器。
- decreasesz() 函数：
  - 使用 setInterval(shrink, 20) 启动一个定时器，每 20 毫秒执行一次 shrink() 函数。
- shrink() 函数：
  - 检查当前宽度是否大于最小宽度 (1000px)。
  - 如果大于最小宽度，则减小宽度，并更新图片的 style.width 属性。 注意：需要将 width 变量转换为字符串，并添加 "px" 单位。
  - 如果达到最小宽度，则使用 clearInterval(Id) 停止定时器。