HTML 图片的放大和缩小 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>童心少年</title>
  </head>
  <body>
      <input type="text" onkeydown="keydown(event)">
      <br/>
      <img id="demo" src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg" width=40 height=40>
      <p id="cs"></p>
      <script>
          var w=40;
             function updatesize(x){
                document.getElementById("demo").width=w;
                document.getElementById("demo").height=w;
                w=w%600+40*x;
              }
          function keydown(event){
              document.getElementById("cs").innerHTML=event.key;
              if(event.key=="ArrowUp"){
                  updatesize(1);
              }else if(event.key=="ArrowDown"){
                  updatesize(-1);
              }
          }
      </script>
  </body>
</html>

 

posted @ 2025-11-23 09:29  爱吃泡面的皮卡  阅读(3)  评论(0)    收藏  举报