js 图片放大缩小(有过渡效果)

最新推荐文章于 2022-03-19 16:26:40 发布

最新推荐文章于 2022-03-19 16:26:40 发布 · 564 阅读

文章标签：

本文介绍了一个使用HTML和JavaScript实现的简单图片缩放功能。当鼠标悬停在图片上时，图片会逐渐放大；当鼠标移开时，图片又会逐渐缩小到原始大小。通过设置不同的参数，可以调整图片变化的速度和范围。

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<img src="D:/1.jpg" name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img"  onmouseover="changeLarge();" onmouseout="changesmall();" /> 
<script> 
var img = document.getElementById("img"); 
var s = null; 
var l = null; 
var step = 8; //调整改变尺寸的速度  
var step_ = step * 2; 
var maxWidth = 200; //最大宽度  
var maxHeight = 200; //最大高度  
var minWidth = 100; //最小宽度  
var minHeight = 100; //最小高度  
function changeLarge(){  
      clearInterval(s); 
      l = setInterval("larger()",1); 
  } 
function changesmall(){ 
      clearInterval(l); 
      s = setInterval("smaller()",1); 
  } 
function smaller(){ 
      if(parseInt(img.width)>minWidth){ 
        img.style.marginLeft = parseInt(img.style.marginLeft)+step; 
        img.width = parseInt(img.width) - step_; 
      }else{ 
        clearInterval(s); 
      } 
      if(parseInt(img.height)>minHeight){ 
        img.style.marginTop = parseInt(img.style.marginTop)+step; 
        img.height = parseInt(img.height) - step_; 
      }else{ 
        clearInterval(s); 
      } 
  } 
function larger(){ 
      if(parseInt(img.width) <maxWidth){ 
        img.style.marginLeft = parseInt(img.style.marginLeft)-step; 
        img.width = parseInt(img.width) + step_; 
      }else{ 
        clearInterval(l); 
      } 
      if(parseInt(img.height) <maxHeight){ 
        img.style.marginTop = parseInt(img.style.marginTop)-step; 
        img.height = parseInt(img.height) + step_; 
      }else{ 
        clearInterval(l); 
      } 
  } 
</script> 
</body>
</html>