jQuery是一種廣泛使用的JavaScript庫(kù)，它提供了許多方便的功能來(lái)簡(jiǎn)化JavaScript編程。其中一個(gè)常見(jiàn)的用途是將鼠標(biāo)懸停在圖像上并放大。接下來(lái)我們將介紹如何使用jQuery實(shí)現(xiàn)這種效果。

//當(dāng)頁(yè)面加載時(shí)
$(document).ready(function(){
//將所有圖像超鏈接轉(zhuǎn)換為實(shí)際圖像，并將它們包裝在div中
$('a img').each(function(){
$(this).parent().css('display', 'inline-block').addClass('img-wrapper');
$(this).css('position', 'absolute');
});
//當(dāng)鼠標(biāo)進(jìn)入和離開(kāi)圖像時(shí)
$('a img').hover(function(){
//計(jì)算圖像的新寬度和高度
var newWidth = $(this).width() * 1.5;
var newHeight = $(this).height() * 1.5;
//將圖像放大到新尺寸。 顯示動(dòng)畫(huà)效果。
$(this).stop().animate({
width: newWidth,
height: newHeight,
top: - newHeight/4,
left: - newWidth/4
}, 'fast');
}, function(){
//當(dāng)鼠標(biāo)離開(kāi)圖像時(shí)，恢復(fù)原始大小。 顯示動(dòng)畫(huà)效果。
$(this).stop().animate({
width: $(this).width(),
height: $(this).height(),
top: 0,
left: 0
}, 'fast');
});
});

上面的代碼將所有圖像超鏈接轉(zhuǎn)換為實(shí)際圖像，并將它們包裝在div中。然后，當(dāng)鼠標(biāo)懸停在圖像上時(shí)，它會(huì)計(jì)算出新的寬度和高度，并通過(guò)動(dòng)畫(huà)效果將圖像放大。當(dāng)鼠標(biāo)離開(kāi)圖像時(shí)，它會(huì)通過(guò)動(dòng)畫(huà)效果恢復(fù)原始大小。

需要注意的是，在CSS中設(shè)置超鏈接的display屬性為“inline-block”是為了確保圖像能夠以單獨(dú)的元素存在，并且可以設(shè)置其位置。另外，由于超鏈接具有自己的默認(rèn)樣式，我們需要使用CSS將圖像的位置設(shè)置為絕對(duì)位置。

通過(guò)上述方法，我們可以快速輕松地為網(wǎng)站中的圖片添加放大效果，提升用戶(hù)體驗(yàn)。