JS图片平滑缩放-优快云博客

本文介绍使用JavaScript的setInterval和clearInterval方法实现图片的平滑放大和缩小效果。通过控制图片尺寸变化的速度和周期，确保过渡流畅。当达到预设的最大或最小尺寸时，会显示警告并停止操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果如下：

背景知识：
setInterval(code,millisec)，已miliseec（以毫秒计）为周期，循环执行code。直到遇到clearInterval。
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
实现思路：
设置两个值，nextWidth和finalWidth
利用setInterval()在20毫秒（可另设）内将图片的宽度和高度同时乘1.05（放大）或者同时乘0.95（缩小），当图片的宽度大于nextWidth（放大的情况）或者小于nextWidth（缩小的情况）时，调用clearInterval停止timeout。当用户继续点击按钮时，继续执行函数。当图片的宽度大于finalWidth（放大的情况）或者图片的宽度小于finalWidth（缩小的情况）时，弹出警告，提示用户图片已不能继续放大或缩小。
注：可通过调整setInterval中的执行周期和每次图片宽度高度增加的倍数，来实现更顺畅的过渡效果。
以放大为例，编写js代码。
var finalWidth=img.width*1.5;          //定义在函数外部，因为这个值时固定的，不能随着函数的执行变化。
function maxfun(){
var nextWidth=img.width*1.2;
var maxtimer=setInterval(function(){
          if(img.width<nextWidth){
                  if(img.width<finalWidth){
                          img.width=img.width*1.05;
                          img.width=img.width*1.05;
                    }
                  else{
                          alert("图片已放大最大");
                          clearInterval(maxtimer);
                    }
            }
          else{
                          clearInterval(maxtimer);
            }
    },20);
}
实现缩小的功能与放大类似。

完整的html和js代码如下：