1 按钮实现图片放大 缩小 还原的方法

1  3张不同大小的图片 点击按钮切换不同图片

 

 

代码：

<div>
        <img src="安寒_副本.jpg" id="1">    <!--默认显示图片-->
</div>

   <script>
       
       
 
     
 function fangda(){    
     
     //点击切换大图
     document.getElementById("1").src="安寒.jpg"    
     
     //点击改变按钮的颜色
     fd.style.background="greenyellow";
     sx.style.background="#FFF";
     hy.style.background="#FFF"
     
     
 }
 
 function huanyuan(){
     
     //点击切换原图
     document.getElementById("1").src="安寒_副本.jpg"  
     
     //点击改变按钮颜色
     hy.style.background="greenyellow"
     fd.style.background="#FFF";
     sx.style.background="#FFF";
 }
       
  function suoxiao(){
      
      //点击切换小图
      document.getElementById("1").src="安寒_副本2.jpg" 
      
      //点击改变按钮颜色
     sx.style.background="greenyellow"
     fd.style.background="#FFF";
     hy.style.background="#FFF";
      
  }
       
       
   </script>

  <button type="button" onclick="fangda()" id="fd">放大</button>        //放大按妞
  <button type="button" onclick="huanyuan()" id="hy">还原</button>     //还原按钮
  <button type="button" onclick="suoxiao()" id="sx">缩小</button>     //缩小按钮

 

 

 

 

 

2 通过改变图片的尺寸来切换图片大小

<div style="width:500px;height:300px"id="div">
<img src='安寒.jpg'  style="width: 100%;height: 100%;">
 <script>
        function showbigger(){
            
            //点击按钮改变图片宽度 高度属性
            div.style.width=700+"px";   
            div.style.height=500+"px";  
            
            //点击按钮改变按钮的颜色
            bt1.style.background="greenyellow";  
            bt2.style.background="#FFF"
            bt3.style.background="#FFF"
            
            
        }
        
        
        function showsmaller(){
            
            
            //点击按钮改变图片宽度 高度属性
            div.style.width=400+"px";
            div.style.height=200+"px";   
            
            //点击按钮改变按钮颜色
            bt2.style.background="greenyellow";
            bt1.style.background="#FFF"
            bt3.style.background="#FFF"
            
        }

        function huanyuan(){
            
            // 点击按钮改变图片宽度 高度属性
            div.style.width=500+"px";
            div.style.height=300+"px";    
            
            //点击按钮改变按钮颜色
            bt3.style.background="greenyellow";
            bt1.style.background="#FFF"
            bt2.style.background="#FFF"
            
        }
    </script>
    
    <div>
    <button  onclick="showbigger()" id="bt1">放大</button>
    <button  onclick="showsmaller()" id="bt2">缩小</button>
    <button  onclick="huanyuan()"  id="bt3" >还原</button>
    </div>