1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title></title>
    6.      <style type="text/css">
    7.     /* 公用样式 */
    8.         #main{
    9.             width:300px;
    10.             height:300px;
    11.             overflow: hidden;
    12.         }
    13.         #img{
    14.             width:300px;
    15.             height: 300px;
    16.             cursor: pointer;
    17.             transition:all 0.5s ease;
    18.         }
    19.     </style>
    20.     <script type="text/javascript">
    21.       function change(){
    22.         document.getElementById("img").style.transform = "scale(1.1)";
    23.       }
    25.      function reset(){
    26.        document.getElementById("img").style.transform = "scale(1)";
    27.      }
    28.     </script>
    29.   </head>
    30.   <body>
    31.       <div id="main">
    32.         <img id="img" src="res/htmlLX/pen.jpg"   onmouseover ="change()" onmouseout="reset()" />  
    33.       </div>
    34.   </body>
    35. </html>

    2021-09-26_211848.jpg