图片缩放动画无法运行？请排查JavaScript代码错误

代码中的核心错误 #

• Script标签位置非法：原代码把<script>放在了</html>标签外面，不符合HTML规范，浏览器无法正确解析这段脚本，会导致缩放函数未被识别。
• 宽度设置缺少单位：修改图片宽度时只传入了数字（如width变量的值），但CSS宽度必须带单位（比如px），否则浏览器不会生效，图片尺寸毫无变化。
• 缩小函数逻辑混乱：shrink函数先把图片宽度设为当前width值，之后才修改width，导致初始步骤完全无效；而且没有在宽度回到1000px时清除定时器，会让定时器一直空跑，引发不必要的性能损耗。
• 定时器叠加问题：鼠标快速移入移出时，会反复创建新的定时器，旧定时器未被清除，多个定时器同时工作会让动画混乱失控。

修正后的完整代码 #

<!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="1.jpg" width="1000px" id="img1">
    <script>
        var width = 1000;
        var timerId = 0;
        var step = 2;
        
        function increasesz() {
            // 启动新动画前先清除旧定时器，避免叠加
            clearInterval(timerId);
            timerId = setInterval(expand, 20);
        }
        
        function expand() {
            if (width < 1200) {
                width += step;
                document.getElementById("img1").style.width = width + "px";
            } else {
                clearInterval(timerId);
            }
        }
        
        function decreasesz() {
            clearInterval(timerId);
            timerId = setInterval(shrink, 20);
        }
        
        function shrink() {
            if (width > 1000) {
                width -= step;
                document.getElementById("img1").style.width = width + "px";
            } else {
                clearInterval(timerId);
            }
        }
    </script>
</body>
</html>

修正关键点说明 #

1. 把<script>标签移到</body>之前，确保DOM加载完成后脚本能正确获取图片元素。
2. 设置style.width时添加"px"单位，保证CSS属性被浏览器正确识别。
3. 调整shrink函数逻辑：先判断宽度范围，再修改数值和图片样式，宽度回到初始值时立即清除定时器。
4. 每次启动新的定时器前，先调用clearInterval清除旧定时器，避免多个动画同时执行。

内容的提问来源于stack exchange，提问作者Sabarish