大家有沒(méi)有見(jiàn)過(guò)其他網(wǎng)站的圖片只要鼠標(biāo)放上去就能放大，移出去的時(shí)候就能縮小，而且一直保持居中顯示！其實(shí)jQuery提供一個(gè)animate函數(shù)可以使圖片放大和縮小，只要改變圖片的長(zhǎng)和高就OK啦！但是animate函數(shù)不能使圖片居中放大或者縮小，這樣看著也不美觀！那么現(xiàn)在就跟大家說(shuō)說(shuō)我對(duì)利用jQuery將圖片居中放大或者縮小的思路！下面就拿放大來(lái)舉例！

    一、總體思路

    其實(shí)要想做到圖片居中放大只需要設(shè)置圖片兩個(gè)部分就行啦！首先就是將圖片長(zhǎng)和高按照一定比例增加，這樣就可以放大，然后在圖片放大的同時(shí)將圖片往左方和上方移動(dòng)到一定位置就能保持居中啦！因?yàn)檎D片是往右方增長(zhǎng)，往下方增高的，所以居中只要在圖片增加一定長(zhǎng)度就將圖片往左方移動(dòng)一定距離，在圖片增加一定高度就將圖片往上方移動(dòng)一定距離就行啦！

    可能上面說(shuō)的有點(diǎn)復(fù)雜，我特地做了個(gè)小動(dòng)畫(huà)以便大家理解！

    首先，將圖片放大

    然后將圖片向左上方移動(dòng)

    這樣圖片最后的位置就是居中的，只要你將圖片在放大的同時(shí)也保持向左上方移動(dòng)，那么圖片放大的過(guò)程就是一直保持居中的！

    二、細(xì)節(jié)處理

    上面只是說(shuō)了一個(gè)大體的思路，其實(shí)還有很多細(xì)節(jié)需要我們?nèi)ヌ幚恚∵@里我只說(shuō)如何按照?qǐng)D片增加的長(zhǎng)度而得出圖片向左或者向上移動(dòng)的距離！現(xiàn)在我們假設(shè)圖片的長(zhǎng)度增加了20px，那么圖片向右延伸了20px,我們?nèi)绻胍３謭D片居中，很簡(jiǎn)單只要讓圖片在向左移動(dòng)10px，最后結(jié)果就是圖片分別向左右延伸了10px，這樣圖片依然是居中的！那么高度增加同理！

    這里有個(gè)公式

    向左移動(dòng)距離 = 圖片增加長(zhǎng)度/2

    向上移動(dòng)距離 = 圖片增加高度/2

    當(dāng)然要想得到圖片動(dòng)態(tài)放大的效果，可以用setInterval()函數(shù)，讓長(zhǎng)、高、距離一點(diǎn)一點(diǎn)的增加和移動(dòng)！具體代碼大家可以看看利用jQuery設(shè)置鼠標(biāo)滑過(guò)圖片居中放大和縮小

本文來(lái)源于王業(yè)樓的個(gè)人博客，本文地址：http://www.ly89.cn/detailB/63.html

歡迎分享本文，轉(zhuǎn)載請(qǐng)注明本文出處和地址