首先，為了讓圖片懸浮變大，我們需要引入jQuery庫，并寫好HTML代碼：
其中，我們給圖片包裹了一層div，方便我們后續(xù)對圖片的操作。
接下來，我們需要在js代碼中寫入鼠標懸浮時圖片改變大小的操作：
在上述代碼中，我們使用了jQuery的.hover()函數來監(jiān)聽鼠標懸浮和離開事件。當鼠標懸浮時，我們使用.animate()函數改變圖片尺寸，加上動畫過渡效果。當鼠標離開時，我們同樣使用.animate()函數讓圖片回到原來的大小。
最后，我們就可以看到圖片在鼠標懸浮的時候，會變大一些。如果想要更改圖片最大的放大倍數，只需要改變代碼中動畫函數中的數字即可。
完整代碼如下：
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="img-container"> <img src="https://picsum.photos/200/300" alt="圖片"> </div> </body>
其中，我們給圖片包裹了一層div，方便我們后續(xù)對圖片的操作。
接下來，我們需要在js代碼中寫入鼠標懸浮時圖片改變大小的操作：
$(document).ready(function() {
$(".img-container img").hover(
function() {
$(this).animate({ "width": "120%", "height": "120%" }, 500);
},
function() {
$(this).animate({ "width": "100%", "height": "100%" }, 500);
}
);
});在上述代碼中，我們使用了jQuery的.hover()函數來監(jiān)聽鼠標懸浮和離開事件。當鼠標懸浮時，我們使用.animate()函數改變圖片尺寸，加上動畫過渡效果。當鼠標離開時，我們同樣使用.animate()函數讓圖片回到原來的大小。
最后，我們就可以看到圖片在鼠標懸浮的時候，會變大一些。如果想要更改圖片最大的放大倍數，只需要改變代碼中動畫函數中的數字即可。
完整代碼如下：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="img-container">
<img src="https://picsum.photos/200/300" alt="圖片">
</div>
<script>
$(document).ready(function() {
$(".img-container img").hover(
function() {
$(this).animate({ "width": "120%", "height": "120%" }, 500);
},
function() {
$(this).animate({ "width": "100%", "height": "100%" }, 500);
}
);
});
</script>
</body>