這個效果最初源于小敏同志的一個想法，剛開始做的時候只能實現(xiàn)彈出的圖片是固定的，不能隨鼠標移動，最后加以改善，終于實現(xiàn)了比較理想的效果。今天就把制作該效果的經(jīng)驗與大家一同分享。先看看最終效果演示：

HTML結構部分：
先編寫一個無序列表的結構，a標簽中的img標簽用來存放小圖片，a標簽添加一個rel屬性，用來存放大圖片的路徑。
代碼如下:

CSS樣式表部分：
bigimage是用jQuery創(chuàng)建的一個p標簽的id，用來存放大圖片，設置其樣式為絕對定位，并先隱藏。給a標簽添加一個黑色的背景，是為了給圖片變暗的效果做鋪墊。就這樣，一個簡單的相冊效果就做好了。
代碼如下:
ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; }
ul#gallery li { width:200px; height:200px; float:left; margin:20px 20px 20px 0; }
ul#gallery li a.smallimage { background:#333; /*添加一個黑色的背景為圖片變暗的效果做鋪墊*/ display:block; width:200px; height:200px; }
#bigimage { position:absolute; display:none; /*大圖片的父標簽設置相對定位并將顯示樣式設置為隱藏*/ }
#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

jQuery代碼部分：
先聲明2個變量x，y用來存放大圖片離鼠標的距離。在body中追加一個id為bigimage的p標簽，用來存放大圖片，大圖片的路徑就包含在了a標簽的rel屬性中。當鼠標在小圖片懸停的時候，將獲取到的鼠標在瀏覽器中的坐標賦值給大圖片絕對定位的坐標，并以淡入的效果顯示。之后，再給小圖片綁定一個mousemove事件，也就是當鼠標移動的時候，大圖片就會跟著鼠標移動了。看以下的代碼：
代碼如下:

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com