如今，網站的視覺效果非常重要，特別是在產品展示的頁面中。有時候，我們會需要對圖片進行放大操作，這樣用戶在瀏覽產品時可以更清楚地看到細節。今天，我們將使用jQuery來實現一個鼠標劃過圖片放大的效果。

$(document).ready(function(){
//獲取圖片元素
var img = $('.product-img');
//設置圖片的寬和高
var imgWidth = img.width();
var imgHeight = img.height();
//設置鼠標移入移出的效果
img.hover(function(){
//移入時，圖片放大到原來的1.5倍
$(this).stop().animate({
width: imgWidth * 1.5,
height: imgHeight * 1.5
}, 300);
}, function(){
//移出時，圖片回到原來大小
$(this).stop().animate({
width: imgWidth,
height: imgHeight
}, 300);
});
});

代碼中，我們首先獲取了圖片元素，然后設置了圖片原本的寬和高。接著，我們使用了hover函數來實現鼠標移入和移出的效果。當鼠標移入時，我們使用animate函數將圖片放大到原來的1.5倍。當鼠標移出時，我們將圖片大小恢復到原來的大小。

這樣，我們就成功實現了一個簡單的鼠標劃過圖片放大的效果。通過這種方式，我們可以更好地展示產品細節，并提升用戶體驗。當然，我們還可以對代碼進行優化，例如加入預加載圖片等操作。